CSS counter-reset Property

Description

The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.

Initial value
none
Applies to
All elements
Inherited
No
Media
All
Computed value
Specified value
Animatable
No
CSS Version
CSS2, CSS3
JavaScript syntax
object.style.counterReset

Syntax

counter-reset: [ <custom-ident><integer>? ]+ | none

Values

  • noneThis element does not alter the value of any counters.
  • <custom-ident><integer>?The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

Example

h1:before {
   content: "Chapter " counter(chapter) ":"
   counter-increment: chapter;
   counter-reset: section;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
812219.23
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37182510.11Yes