CSS Counters

CSS Counters Tutorial: Automatic Numbering in CSS

CSS counters are a way to automatically number elements in a document using CSS. They can be used for creating numbered lists, adding custom numbering to elements, or managing multiple counters independently.

Syntax

Defining a Counter
```
counter-reset: name;
```
Try It Now
Incrementing a Counter
```
counter-increment: name;
```
Try It Now
Displaying a Counter
```
content: counter(name);
```
Try It Now

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Counters Example</title>
  <style>
    body {
      counter-reset: section; /* Create a counter called 'section' */
    }

    h2::before {
      counter-increment: section; /* Increment the 'section' counter */
      content: "Section " counter(section) ": "; /* Display the counter */
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>Introduction</h2>
  <p>This is the first section.</p>
  
  <h2>Details</h2>
  <p>This is the second section.</p>
  
  <h2>Conclusion</h2>
  <p>This is the third section.</p>
</body>
</html>

Try It Now

Output: Each <h2> will be prefixed with “Section 1: “, “Section 2: “, and so on.

Advanced Example with Nested Counters

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Counters Example</title>
  <style>
    body {
      counter-reset: section; /* Reset the main counter */
    }

    h1 {
      counter-reset: subsection; /* Reset the subsection counter for each main section */
    }

    h1::before {
      counter-increment: section;
      content: "Chapter " counter(section) ": ";
    }

    h2::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";
    }
  </style>
</head>
<body>
  <h1>Chapter One</h1>
  <h2>Introduction</h2>
  <p>Content for the first chapter's introduction.</p>
  
  <h2>Details</h2>
  <p>Content for the first chapter's details.</p>
  
  <h1>Chapter Two</h1>
  <h2>Overview</h2>
  <p>Content for the second chapter's overview.</p>
</body>
</html>

Try It Now

Output:

The first <h1> is labeled “Chapter 1”.
<h2> elements are labeled “1.1”, “1.2”, etc., for the first chapter, and “2.1” for the second chapter.

Key Concepts

counter-reset: Initializes a counter to a specified value (default is 0).
counter-increment: Increases the counter value by a specified amount (default is 1).
counter(): Returns the current value of the specified counter.
counters(): Similar to counter(), but used to return a combined value of a counter with a specified string (e.g., “1.1.1”).

Practical Use Cases

Numbering Headings: Automatically number section headings in a document.
Custom Ordered Lists: Create custom-styled ordered lists without relying on <ol>.
Breadcrumbs Navigation: Number navigation steps in a multi-step form.

Tips

Use meaningful names for counters to keep your CSS organized.
Nest counters carefully, especially in complex documents, to avoid confusion.
Consider accessibility; ensure users relying on assistive technologies can still understand the content without visual cues.

CSS counters provide a powerful tool for automating numbering in web documents, improving consistency and reducing the need for manual updates.