Mastering CSS counter-increment for Dynamic Numbering

Introduction

The counter-increment CSS property is used to increase or decrease the value of named CSS counters. If a counter doesn’t exist, it will be created. If no value is provided, the counter will be increased by 1. This property is great for creating automatic numbering systems, like lists or headings, without needing JavaScript.

Syntax

The syntax for counter-increment is straightforward:

counter-increment: none | [ <counter-name> [ <integer> ]? ]+ | initial | inherit | revert | revert-layer | unset;

Explanation

• none: Prevents any counters from being incremented or decremented.
• [ <counter-name> [ <integer> ]? ]+: Specifies one or more counters to increment or decrement. If an integer value is provided, the counter will be incremented or decremented by that amount.
• initial: Sets the property to its default value.
• inherit: Inherits the value from the parent element.
• revert: Rolls back the value to the user-agent stylesheet value.
• revert-layer: Rolls back the value to the value of the next outer CSS layer’s cascade origin.
• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Examples

Decreasing the Counter Value

In this example, we display numbers counting backward from 100, decreasing by 7 each time.

<div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
  ><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}

Increasing the Counter Value

In this example, we create a simple numbered list, incrementing the counter by 1 for each list item.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

ul {
  counter-reset: item;
}
li {
  counter-increment: item;
}
li::before {
  content: counter(item) ". ";
}

Using Multiple Counters

In this example, we use multiple counters to create a nested numbering system for sections and sub-sections.

<div class="multiple-counter">
  <h4>Section 1</h4>
  <p>Item 1.1</p>
  <p>Item 1.2</p>
  <h4>Section 2</h4>
  <p>Item 2.1</p>
  <p>Item 2.2</p>
</div>

.multiple-counter {
  counter-reset: main-counter;
}
.multiple-counter h4 {
  counter-reset: sub-counter;
}
.multiple-counter h4::before {
  counter-increment: main-counter;
  content: "Section " counter(main-counter) ". ";
}
.multiple-counter p::before {
  counter-increment: sub-counter;
  content: counter(main-counter) "." counter(sub-counter) " ";
}

Browser Support

The counter-increment property is widely supported across modern web browsers:

• Google Chrome: Supported since version 4.0.
• Firefox: Supported since version 2.0.
• Internet Explorer/Edge: Supported since version 8.0.
• Opera: Supported since version 9.6.
• Safari: Supported since version 3.1.

Specifications

The counter-increment property is defined in the CSS Lists and Counters Module Level 3. This module specifies the behavior and syntax for CSS counters.

Key Points from the Specification

1. Incrementing and Decrementing Counters: You can specify how counters should be incremented or decremented.
2. Creating Counters: If a named counter doesn’t exist, it will be created.
3. Resetting Counters: The counter-reset property can reset a counter to a specified integer value.
4. Global Values: The property supports global values like initial, inherit, revert, revert-layer, and unset.

See Also

To learn more about CSS counters and related properties, explore these resources:

• Counter Properties:

  • counter-set: Sets the value of one or more counters.
  • counter-reset: Resets the value of one or more counters.

• Counter At-Rule:

  • @counter-style: Defines custom counter styles for more control over their appearance.

• Counter Functions:

  • counter(): Displays the value of a counter.
  • counters(): Displays nested counters.

• Guides and Modules:

  • Using CSS Counters: A comprehensive guide on using CSS counters effectively.
  • CSS Lists and Counters: Covers the specifications for CSS lists and counters, including the counter-increment property.
  • CSS Counter Styles: Provides information on different styles that can be applied to counters.