CSS counter-reset Property

CSS counter-reset property resets one or more CSS counters. The counter-reset property is used with the counter-increment property.

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.counterReset = "section"

Syntax

Here is a syntax for the CSS counter-reset property

counter-reset: identifier integer | none | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
identifier The name of the counter to reset
integer The integer value to reset the counter. Default reset value is 0
none Default. No counters will be reset
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets counter-reset property.

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

Run it...   »

Browser Compatibility

  • Google Chrome 4+
  • Mozilla Firefox 2+
  • Internet Explorer 8+
  • Opera 9.6+
  • Safari 3.1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.