counters()
The counters()
CSS function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The counters()
function has two forms: counters(name, string)
or counters(name, string, style)
. It is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string>
value is supported. The generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. The counters are rendered in the style indicated, defaulting to decimal
if no style is specified.
Try it
Syntax
css
/* Simple usage - style defaults to decimal */
counters(countername, '-');
/* changing the counter display */
counters(countername, '.', upper-roman)
A counter has no visible effect by itself. The counters()
function (and counter()
function) is what makes it useful by returning developer defined content.
Values
<custom-ident>
-
A name identifying the counters, which is the same case-sensitive name used for the
counter-reset
andcounter-increment
. The name cannot start with two dashes and can't benone
,unset
,initial
, orinherit
. <counter-style>
-
A counter style name or
symbols()
function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other predefined counter style. If omitted, the counter-style defaults to decimal <string>
-
Any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example,
\000A9
represents the copyright symbol.
Formal syntax
<counters()> =
counters( <counter-name> , <string> , <counter-style>? )
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
Examples
default value compared to upper Roman
HTML
html
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
CSS
css
ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
content: counters(listCounter, ".") " == " counters(
listCounter,
".",
lower-roman
);
}
Result
decimal-leading-zero compared to lower-alpha
HTML
html
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
CSS
css
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::marker {
content: counters(count, ".", upper-alpha) ") ";
}
li::before {
content: counters(count, ".", decimal-leading-zero) " == " counters(
count,
".",
lower-alpha
);
}
Result
Specifications
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-functions |
Browser compatibility
BCD tables only load in the browser