negative

Baseline 2023

Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The negative descriptor of the @counter-style at-rule lets you define how negative counter values are represented when defining custom counter styles. The value of the negative descriptor defines the symbols to be added before and after the counter representation when the counter's value is negative.

Syntax

css

/* One <symbol> value */
negative: "--"; /* Adds '--' before if counter value is negative */

/* Two <symbol> values */
negative: "(" ")"; /* Adds '(- before and ')' after if counter value is negative */

Values

The negative descriptor accepts up to two <symbol> values.

<symbol>: If only one value is specified, it is added before the counter representation when the counter is negative. If two values are specified, the first one is added before and the second one is added after the counter representation when the counter is negative.

Description

If the counter value is negative, the specified <symbol> for the negative descriptor is added before the counter representation, replacing the default - for negative values. The second <symbol>, if specified, is added after the counter representation.

The negative descriptor is relevant in two cases: if counter styles have the system value of symbolic, alphabetic, numeric, and additive and the count is negative; and if system value is extends and the extended counter style itself uses a negative sign. For systems that don't support negative counter values, specifying the negative descriptor has no effect and 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()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Examples

Rendering negative counters

This example extends the decimal list style. The negative descriptor is used to add (- and ) before and after negative counter values.

HTML

html

<ol start="-3">
  <li>Negative three</li>
  <li>Negative two</li>
  <li>Negative one</li>
  <li>Zero</li>
  <li>One</li>
</ol>

CSS

css

@counter-style neg {
  system: extends decimal;
  negative: "(-" ")";
  suffix: ": ";
}

ol {
  list-style: neg;
}

Result

The prefix and suffix listed as the value of the negative descriptor are only added to the marker when the counter value is less than zero.

Specifications

Specification
CSS Counter Styles Level 3 # counter-style-system

Browser compatibility

BCD tables only load in the browser