🔄 CSS counter-reset: Starting & Resetting Counters in CSS

When working with CSS counters, it’s crucial to control where counters start or reset to ensure numbering behaves correctly. That’s exactly what the counter-reset property does: it initializes or resets named counters to a specific value.

---

🧾 What is counter-reset?

counter-reset sets the initial value of a CSS counter or resets it back to zero (or any specified number) at a certain point in the document flow. This makes it possible to create complex numbering schemes like chapters, sections, or nested lists.

---

🧬 Syntax

selector {
  counter-reset: <counter-name> <value>?;
}

Values:

Value	Description
<counter-name>	The name of the counter to reset
<value>	Optional. The value to reset to (default is 0)

You can also reset multiple counters at once:

counter-reset: counter1 0 counter2 5;

---

🎯 How It Works

• When the browser encounters the element with counter-reset, it sets the named counter(s) to the specified value.
• Usually paired with counter-increment and content: counter() to display counter values.
• Often used on parent containers to start numbering fresh for child elements.

---

🎨 Example: Resetting Step Numbering per Section

HTML

<section class="chapter">
  <div class="step">First step in chapter 1</div>
  <div class="step">Second step in chapter 1</div>
</section>
<section class="chapter">
  <div class="step">First step in chapter 2</div>
  <div class="step">Second step in chapter 2</div>
</section>

CSS

.chapter {
  counter-reset: step-counter; /* Reset counter for each chapter */
}

.step {
  counter-increment: step-counter; /* Increment counter */
}

.step::before {
  content: "Step " counter(step-counter) ": ";
  font-weight: bold;
  color: #e76f51;
}

Result: Each .chapter restarts numbering from 1:

• Chapter 1 steps: Step 1, Step 2
• Chapter 2 steps: Step 1, Step 2

---

🧠 Use Cases

• Restarting numbering in new sections, chapters, or articles
• Creating nested counters for complex documents (e.g., 1.1, 1.2, 2.1)
• Resetting counters after page breaks for print styles
• Managing multiple counters simultaneously

---

🛠️ Tips & Tricks

• Always initialize counters with counter-reset before incrementing.
• Combine with multiple counters for hierarchical numbering:

body {
  counter-reset: chapter 0 section 0;
}

.chapter {
  counter-increment: chapter;
  counter-reset: section;
}

.section {
  counter-increment: section;
}

.chapter::before {
  content: "Chapter " counter(chapter);
}

.section::before {
  content: counter(chapter) "." counter(section) " ";
}

---

✅ Browser Support

Excellent support across all modern browsers:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Internet Explorer 8+

---

🔚 Conclusion

The CSS counter-reset property is your starting point for any CSS counter system — letting you initialize or reset counters easily to build custom numbering and structured content.

---