The system
descriptor specifies the algorithm to be used for converting the integer value of a counter to a string representation. It is used in a @counter-style
to define the behavior of the defined style.
/* Keyword values */ system: cyclic; system: numeric; system: alphabetic; system: symbolic; system: additive; system: fixed; /* Combined values */ system: fixed 3; system: extends decimal;
If the algorithm specified in the system
descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fallback system provided.
Related at-rule | @counter-style |
---|---|
Initial value | symbolic |
Media | all |
Computed value | as specified |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
This may take one of three forms:
cyclic
, numeric
, alphabetic
, symbolic
, additive
, or fixed
.fixed
along with an integer.extends
along with a @counter-style
name.cyclic
symbols
descriptor, or the counter style is not valid.fixed
symbols
descriptor or the counter style is not valid. Also an optional <integer>
can be specified after the the system, as the value of the first symbol. If this integer is omitted, value of the first integer is taken as 1
.symbolic
symbols
descriptor or the counter style is not valid. This counter system works for positive counter values only.alphabetic
"a"
to "z"
are specified as symbols in a counter style, with the alphabetic
system, then the first 26 counter representations will be "a"
, "b"
upto "z"
. Until this point, the behavior is the same as that of the symbolic
system, described above. However, after "z"
, it will continue as "aa"
, "ab"
, "ac"
…symbols
descriptor must contain at least two symbols or the counter style is not valid. The first counter symbol provided in the symbols
descriptor is interpreted as 1
, the next as 2
, and so on. This system is also defined strictly over positive counter values.numeric
alphabetic
system, described above. The main difference is that in the alphabetic
system, the first counter symbol given in the symbols
descriptor is interpreted as 1
, the next as 2
, and so on. However, in the numeric system, the first counter symbol is interpreted as 0, the next as 1
, then 2
, and so on.symbols
descriptor or the counter style is not valid.additive
additive-symbols
must be specified with at least one additive tuple, or else the counter style rule will not be valid. An additive tuple is similar to a composite counter symbol, which is made up of two parts: a normal counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights or the system is invalid.extends
extends
system, any unspecified descriptors, and their values will be taken from the extended counter style specified. If the specified counter style name in extends, is not a currently defined counter style name, it will instead extend from the decimal counter style.symbols
or additive-symbols
descriptor, or else the counter style rule is invalid. If one more more counter styles defenitions form a cycle with their extends values, the browser will treat all the participating counter styles as extending from the decimal style.cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>? ] | [ extends <counter-style-name> ]where
<counter-style-name> = <custom-ident>
@counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; }
If your browser supports it, the above example will render a list like this:
◉ One
◉ Two
◉ Three
@counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; }
If your browser supports it, the above example will render a list like this:
➀ One
➁ Two
➂ Three
4 Four
5 Five
@counter-style abc { system: symbolic; symbols: a b c; suffix: ". "; } ul { list-style: abc; }
If your browser supports it, the above example will render a list like this:
a. One
b. Two
c. Three
aa. Four
bb. Five
cc. Six
aaa. Seven
bbb. Eight
@counter-style abc { system: alphabetic; symbols: a b c; suffix: ". "; } ul { list-style: abc; }
If your browser supports it, the above example will render a list like this:
a. One
b. Two
c. Three
aa. Four
ab. Five
ac. Six
ba. Seven
bb. Seven
@counter-style abc { system: numeric; symbols: a b c; suffix: ". "; } ul { list-style: abc; }
If your browser supports it, the above example will render a list like this:
b. One
c. Two
ba. Three
bb. Four
bc. Five
ca. Six
cb. Seven
cc. Eight
The first symbol provided in the symbols
descriptor is interpreted as 0
here.
As shown in the following example, if digits from 0
to 9
are specified as symbols, this counter style will render symbols same as the decimal counter style.
@counter-style numbers { system: numeric; symbols: 0 1 2 3 4 5 6 7 8 9; suffix: ": "; } ul { list-style: numbers; }
If your browser supports it, the above example will render a list like this:
1: One
2: Two
3: Three
4: Four
5: Five
6: Six
7: Seven
8: Eight
9: Nine
10: Ten
This example renders a list using Roman numerals. Notice that a range
is specified. This is because the representation will produce correct Roman numerals only until the counter value of 3999
. Once outside of the range, the rest of the counter representations will be based on the decimal
style, which is the fall back. If you need to represent counter values as Roman numerals, you could use either one of the predefined counter styles, upper-roman
or lower-roman
, rather than recreating the rule yourself.
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
@counter-style upper-roman { system: additive; range: 1 3999; additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I; } ul { list-style: upper-roman; }
This example will use the algorithm, symbols, and other properties of the lower-alpha
counter style, but will remove the period ('.'
) after the counter representation, and enclose the characters in paranthesis; like (a)
, (b)
, etc.
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
@counter-style alpha-modified { system: extends lower-alpha; prefix: "("; suffix: ") "; } ul { list-style: alpha-modified; }
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'system' in that specification. | Candidate Recommendation | Initial definition. |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | No | ? | 33 | No | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | ? | ? | 33 | No | No | No |
list-style
, list-style-image
, list-style-position
symbols()
, the functional notation creating anonymous counter styles.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system