CSS counter-reset Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The counter-reset property in CSS is used to create or reset one or more CSS counters.

Counters are used to track the occurrence of elements and are often used for numbering items in a list, creating custom counters for sections, or managing complex numbering schemes in documents.

💡 Syntax

The syntax for the counter-reset property allows you to specify one or more counters and their initial values.

Syntax

Copied

element {
  counter-reset: name number;
}

🎛️ Default Value

The default value of the counter-reset property is none, which means no counter is created or reset.

🏠 Property Values

Value	Description
none	No counter is created or reset.
name	The name of the counter to reset.
number	The initial value for the counter (optional). If omitted, the initial value is 0.

📄 Example

In this example, we'll create a counter to number the sections of a document.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS counter-reset Example</title>
  <style>
    body {
      counter-reset: section;
    }
    h2::before {
      counter-increment: section;
      content: "Section " counter(section) ": ";
    }
  </style>
</head>
<body>
  <h2>Introduction</h2>
  <p>This is the introduction section.</p>
  
  <h2>Background</h2>
  <p>This is the background section.</p>
  
  <h2>Conclusion</h2>
  <p>This is the conclusion section.</p>
</body>
</html>

🖥️ Browser Compatibility

The counter-reset property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is a well-established feature in CSS, so you can use it confidently in your web projects.

🎉 Conclusion

The counter-reset property is a versatile tool for managing counters in your web documents.

Whether you're creating numbered lists, custom section counters, or complex numbering schemes, this property provides a straightforward way to initialize and manage counters. Experiment with different counter names and values to see how they can enhance the structure and readability of your content.