CSS - additive-symbols
The additive-symbols descriptor is similar to the symbols
descriptor and allows the user to specify symbols to be used for counter representations when the value of the system
descriptor is additive. The additive-symbols
descriptor defines what are known as additive tuples, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct sign-value numbering systems such as the Roman numerals.
Example
HTML Content
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
CSS Content
@counter-style additive-symbols-example { system: additive; additive-symbols: I 1; } .list { list-style: additive-symbols-example; }
Result
Syntax
additive-symbols: 3 "0"; additive-symbols: 3 "0", 2 "\2E\20"; additive-symbols: 3 "0", 2 url(symbol.png);
Formal syntax
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#double_ampersand" title="Double ampersand">&&</a> <a href="css/@counter-style/additive-symbols#symbol"><symbol></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><symbol> = <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <ident></code></p>
Description
The additive-symbols descriptor is similar to the symbols
descriptor and allows the user to specify symbols to be used for counter representations when the value of the system
descriptor is additive. The additive-symbols
descriptor defines what are known as additive tuples, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct sign-value numbering systems such as the Roman numerals.
When the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, the symbols
descriptor is used instead of additive-symbols
to specify counter symbols.
Related at-rule | @counter-style |
---|---|
Initial value | N/A |
Media | all |
Computed value | as specified |
Canonical order | order of appearance in the formal grammar of the values |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | 33 (33) | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 33 (33) | No support | No support | No support |
See Also
list-style
,list-style-image
,list-style-position
symbols()
, the functional notation creating anonymous counter styles.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'additive-symbols' in that specification. |
Candidate Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@counter-style/additive-symbols