CSS counter-reset Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The counter-reset property creates or resets one or more named counters for an element, establishing the baseline numeric values that child elements will use when they increment and display counters. It does not itself display anything; instead it defines or reinitializes counters that can later be manipulated by other CSS mechanisms and inserted into generated content. Think of it as setting the starting points for counter sequences so that subsequent increments produce predictable, ordered numbers.

Counters set by this property are scoped to the element on which it is declared and to its descendants. When a counter is reset on an element, that reset affects the rendering of generated content within that subtree; child elements will see the new baseline and any counter-increment operations will continue from it. Because counters follow the document tree, you can create hierarchical numbering schemes (for example, multi-level headings) by resetting counters at higher-level containers and incrementing subordinate counters in nested elements.

Counters are typically exposed into rendered output through generated content, so they are most useful when paired with the property that inserts that content. The usual pattern is to increment counters where appropriate and then use the content mechanism (with the counter() function) inside pseudo-elements to present the numeric values. Resetting a counter at a strategic element gives you precise control over where numbering starts or restarts — for instance, restarting numbering at the start of a new chapter or section — without altering the document structure.

Practically, counter-reset is a powerful tool for creating ordered visual sequences (numbered headings, outlines, custom list markers, automatically numbered figures or tables) while keeping semantic HTML untouched. When designing styles that rely on it, consider the placement of resets relative to increments so the intended values appear where expected, and remember that multiple named counters can be managed independently to support complex numbering schemes across the same document.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.counterReset

Interactive Demo

Learning CSS

Forward
Introduction to CSS
Color
Text
The Box Model
Lists

Syntax

counter-reset: [ <custom-ident><integer>? ]+ | none

Values

noneThis element does not alter the value of any counters.
<custom-ident><integer>?The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

Example

HTML

<body>

  <div class="document">

    <h1>Sample Document</h1>



    <section>

      <h2>Introduction</h2>

      <p>Some introductory text.</p>

    </section>



    <section>

      <h2>Chapter One</h2>



      <article>

        <h3>Topic A</h3>

        <p>Details about topic A.</p>

      </article>



      <article>

        <h3>Topic B</h3>

        <p>Details about topic B.</p>

      </article>

    </section>



    <section>

      <h2>Chapter Two</h2>



      <article>

        <h3>Topic C</h3>

        <p>Details about topic C.</p>

      </article>

    </section>

  </div>

</body>

CSS

/* Reset top-level section counter on the document container */
.document {
  counter-reset: section; /* start section numbering at 0 (will increment to 1 on first section) */
  font-family: Arial, Helvetica, sans-serif;
  padding: 24px;
  color: #222;
}

/* Each section resets its subsection counter and increments the section counter */
section {
  counter-reset: subsection; /* reset subsection for each new section */
  counter-increment: section; /* increment section number */
  margin-bottom: 18px;
}

/* Display section number before the h2 */
section > h2::before {
  content: 'Section ' counter(section) '. ';
  font-weight: 700;
  color: #1f6feb;
}

/* Articles increment the subsection counter */
article {
  counter-increment: subsection;
  margin-left: 18px;
  margin-bottom: 8px;
}

/* Display composite numbering (section.subsection) before h3 */
article > h3::before {
  content: counter(section) '.' counter(subsection) ' ';
  font-weight: 600;
  color: #0b8a6d;
}

/* Small visual tweaks */
h1 {
  margin-bottom: 12px;
}
h2 {
  margin: 8px 0;
}
h3 {
  margin: 6px 0;
}
p {
  margin: 4px 0 10px 0;
  line-height: 1.4;
  color: #333;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS counter-reset property. Hover over a browser icon to see the version that first introduced support for this CSS property.