CSS counter-reset Property

The counter-reset property resets one or more CSS counters 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;

Example of the counter-reset property:

<!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>

Example of the counter-reset property with negative value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* "my-counter" to 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* "my-counter" by 1 */
        counter-increment: my-counter -1;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Example of the counter-reset property with numbered sections and subsections:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </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

chrome edge firefox safari opera
2.0+ 12.0+ 1.0+ 3.1+ 9.2+

Practice Your Knowledge

What is the CSS 'counter-reset' property used for?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?