W3docs
en
Log in

CSS counter-reset Property

Use CSS counter-reset property to define and initialize one or more CSS counters. Try counter-reset property examples! Learn with W3docs.

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 property accepts a counter name and an optional integer, or the keyword none. none is the default value. Negative values are allowed.

Initial Valuenone
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.style.counterReset = "section" ;

Syntax

Syntax of CSS counter-reset Property

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

Example of the counter-reset property:

Example of CSS counter-reset Property with section value

<!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 5";
      }
    </script>
  </body>
</html>
Try it Yourself »

Example of the counter-reset property with negative value:

Example of the counter-reset property with the 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:

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

ValueDescription
noneCounters are not incremented.
name numberName 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.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

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