CSS - counter-reset

The counter-reset CSS property is used to reset CSS Counters to a given value.



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


/* Set counter-name to 0 */
counter-reset: counter-name;

/* Set counter-name to -1 */
counter-reset: counter-name -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 name of the counter to increment. This identifier is composed by a combination of case-insensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can't be none, unset, initial, or inherit in any combination of cases.
The value to reset the counter to on each occurrence of the element. Defaults to 0 if not given.
Is a keyword indicating that no counter reset is to be performed. It can be used to hide counter-reset defined in less specific rules.

You may specify as many counters to reset as you want, each separated by a space.

Formal syntax

<a href="css/value_definition_syntax#brackets" title="Brackets">[</a><custom-ident> <a href="css/integer" title=""><integer></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none


The counter-reset CSS property is used to reset CSS Counters to a given value.

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

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0[1] 8.0 9.2 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 25.0[1] 10[1] 10.0 3.2

[1] The compatibility info may not be correct.

See Also  


Specification Status Comment
CSS Lists and Counters 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.


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS List CSS Property NeedsMobileBrowserCompatibility Reference