CSS counter-reset Property

The counter-reset property resets one or more CSS counter to a given value. This property is usually used with the content and counter-increment properties. The counter-reset property is specified by two values: none and id numbers. "None" is the default value of this property. Negative values are allowed.

Initial Value none
Applies to All elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax object.style.counterReset = "section" ;

Syntax

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

Click "Try it" button to set the counter-reset property.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
      counter-increment: section;
      content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section";
      }
    </script>
  </body>
</html>

Values

Value Description
none Counters are not incremented.
name number Name defines the name of the counter to reset. Number defines the value to reset the counter to on each occurrence of the element. Defaults to 0 if not specified.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

2.0+ 8.0+ 12.0+ 1.0+ 3.1+ 9.2+




Related articles