The CSS counter-reset property acts like a variable assignment in a programming language - it sets a new value for the specified counter when the current CSS selector is encountered. The property lists one or more counter labels, each followed by an optional integer reset value (default increment is 0).

If a counter is reset and rendered using a single CSS selector (with the content property and :before/:after pseudo-elements), it should be reset first, then rendered. If a single CSS selector both increments and resets a counter, it is reset, then incremented.


Value Description
inherit Explicitly sets the value of this property to that of the parent.
none Suppresses resetting counters for the current selector.
<identifier> <integer>? + Specifies one or more counters to reset and the values to reset each one to.

CSS examples:

h1 {
  counter-reset: chapter section 1 page;
  /* Sets the chapter and page counters to 0
     and the section counter to 1. */
h1:before {
  counter-increment: main-heading;
  counter-reset: sub-heading;
  content: "Section " counter(main-heading) ":" 

See Also

External Links

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.