CSS counter-reset Property

❮ Prev Next ❯

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" ;

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.