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

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support2.01.0 (?)8.09.23.1 (?)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNANANANANA

Relative articles

Flat UI Kits