counter-reset property CSS Reference



Definition and Usage

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

  • Initial none
  • Applies to all elements
  • Inherited no
  • Media all
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: [<user-ident> <integer>?]+ | none
counter-reset: counter-name        /* Set counter-name to 0 */
counter-reset: counter-name -1     /* Set counter-name to -1 */
counter-reset: counter1 1 counter2 4 /* Set counter1 to 1, and counter2 to 4 */
counter-reset: none                /* Cancel any reset that could have been set in less specific rules */
counter-reset: inherit

Values

<user-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 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.

Examples

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

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (?) 8.0 9.2 3.1 (?)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA NA NA NA NA

Relative articles