When defining custom counter styles, the negative
descriptor lets you alter the representations of negative counter values, by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.
On this page
negative
Syntax
css
/* <symbol> values */
negative: "-"; /* Prepends '-' if value is negative */
negative: "(" ")"; /* Surrounds value by '(' and ')' if it is negative */
Values
Description
If the counter value is negative, the symbol provided as value for the descriptor is prepended to the counter representation; and a second symbol if specified, will be appended to the representation. The negative descriptor has effect only if the system
value is symbolic
, alphabetic
, numeric
, additive
, or extends
, if the extended counter style itself uses a negative sign. If the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored.
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | "-" hyphen-minus |
Computed value | as specified |
Formal syntax
negative =
<symbol> <symbol>?
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
Examples
Rendering negative counters
HTML
html
<ol class="list" start="-3">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
CSS
css
@counter-style neg {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
negative: "(-" ")";
}
.list {
list-style: neg;
}
Result
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-system |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
negative |
91 | 91 | 33 | No | 77 | 17 | 91 | 91 | 33 | 64 | 17 | 16.0 |
See also
list-style
,list-style-image
,list-style-position
symbols()
, the functional notation creating anonymous counter styles.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative