counter-set

Baseline 2023
Newly available

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

The counter-set CSS property sets CSS counters on the element to the given values.

If the counters don't exist the counter-set property creates a new counter for each named counter in the list of space-separated counter and value pairs. However, to create a new counter it is recommended to use the counter-reset CSS property.

If a named counter in the list is missing a value, the value of the counter will be set to 0.

Try it

Note: The counter's value can be incremented or decremented using the counter-increment CSS property.

Syntax

css
/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Set "my-counter" to -1 */
counter-set: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-set: counter1 1 counter2 4;

/* Cancel any counter that could have been set in less specific rules */
counter-set: none;

/* Global values */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;

The counter-set property is specified as either one of the following:

  • A <custom-ident> naming the counter, followed optionally by an <integer>. You may specify as many counters to reset as you want, with each name or name-number pair separated by a space.
  • The keyword value none.

Values

<custom-ident>

The name of the counter to set.

<integer>

The value to set the counter to on each occurrence of the element. Defaults to 0 if not specified. If there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

none

No counter set is to be performed. This can be used to override a counter-set defined in a less specific rule.

Formal definition

Initial valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typeby computed value type

Formal syntax

counter-set = 
[ <counter-name> <integer>? ]+ |
none

Examples

Setting named counters

css
h1 {
  counter-set: chapter section 1 page;
  /* Sets the chapter and page counters to 0,
     and the section counter to 1 */
}

Specifications

Specification
CSS Lists and Counters Module Level 3
# propdef-counter-set

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter-set
list-item
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also