CSS counter-reset attribute

Definition and Usage

The counter-reset property sets the value of the counter for the occurrences of a certain selector. The default value is 0.

Using this property, the counter can be set or reset to any value, which can be positive or negative. If no number is provided, the default is 0.

Note:If "display: none" is used, the counter cannot be reset. If "visibility: hidden" is used, the counter can be reset.

See also:

CSS Reference Manual:CSS :before pseudo-element

CSS Reference Manual:CSS :after pseudo-element

CSS Reference Manual:content Attribute

CSS Reference Manual:counter-increment Attribute

CSS Function:counter() Function

HTML DOM Reference Manual:counterReset Attribute

Example

Methods for numbering parts and subparts (such as "Section 1", "1.1", "1.2"):

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

Try it yourself

CSS Syntax

counter-reset: none|name number|initial|inherit;

Attribute Value

Value Description
none Default. The counter of the selector cannot be reset.
id number

id Specifies the selector, id, or class to reset the counter.

number The value of the counter that appears this many times. It can be a positive number, zero, or a negative number.
inherit Specifies that the counter-reset attribute's value should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.counterReset="subsection"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Note:If !DOCTYPE has been declared, then Internet Explorer 8 (and higher versions) support the counter-reset attribute.