The counter-reset CSS property resets a CSS counter to a given value.

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

Syntax

/* Set "my-counter" to 0 */
counter-reset: my-counter;

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

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

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

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

The counter-reset 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 reset.
<integer>
The value to reset the counter to on each occurrence of the element. Defaults to 0 if not specified.
none
No counter reset is to be performed. This can be used to override a counter-reset defined in a less specific rule.

Formal syntax

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

Examples

h1 {
  counter-reset: 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 3
The definition of 'counter-reset' in that specification.
Working Draft No change.
CSS Level 2 (Revision 1)
The definition of 'counter-reset' in that specification.
Recommendation Initial definition.

Initial valuenone
Applies toall elements
Inheritedno
Mediaall
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 2Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 9.2Safari Full support 3.1WebView Android Full support 2Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 25Opera Android Full support 10Safari iOS Full support 3.2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Last updated by: connorshea,