counter-reset

Summary

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

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

[<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

Browser compatibility

[1] The compatibility info may not be correct.

See also

• CSS Counters, counter-increment