Web/CSS/counter-set

The counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.

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

Syntax

/* 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: 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 value	`none`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

[ <custom-ident> <integer>? ]+ | none

Examples

Setting named counters

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

Specifications

Specification	Status	Comment
CSS Lists Module Level 3The definition of 'counter-set' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`counter-set`	Chrome Full support 85	Edge Full support 85	Firefox Full support 68	IE No support No	Opera Full support 71	Safari No support No	WebView Android Full support 85	Chrome Android Full support 85	Firefox Android Full support 68	Opera Android Full support 60	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support