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

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
counter-setChrome No support NoEdge No support NoFirefox Full support 68IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 68Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No


Full support
Full support
No support
No support

See also