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.


/* 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.


The name of the counter to set.
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).
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
Computed valueas specified
Animation typediscrete

Formal syntax

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


Setting named counters

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


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

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
counter-setChrome Full support 85Edge Full support 85Firefox Full support 68IE No support NoOpera Full support 71Safari No support NoWebView Android Full support 85Chrome Android Full support 85Firefox Android Full support 68Opera Android Full support 60Safari iOS No support NoSamsung Internet Android No support No


Full support  
Full support
No support  
No support

See also