CSS - counter-reset

Example

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

Syntax  

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

Values

<custom-ident>

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.

<integer>

The value to reset the counter to on each occurrence of the element. Defaults to 0 if not given.

none

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

Description  

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

Browser Compatibility  

[1] The compatibility info may not be correct.

See Also  

• CSS Counters, counter-increment

Specifications  

License