B.26. counter-increment

This property increments or decrements a named counter (for display with the content property) for each occurrence of the selected element(s).

On nested elements, a hierarchical counter is automatically created, so that you effectively have a separate counter at each level of the structure.

Inherited: No

See also: Section B.25content, Section B.27counter-reset

B.26.1. Value

A counter name, optionally followed by a positive or negative integer to indicate how much to increment (positive) or decrement (negative) the counter. If you want to increment/decrement multiple counters for a single element, you can separate their names (and optional integers) by spaces.

The default value, none is also supported, but is of little practical use.

Initial value: none

B.26.2. Compatibility

CSS Version: 2

Not supported by any currently-available browser.

B.26.3. Examples

This simple example will keep track of the number of h1 tags in the document and will output a chapter number at the start of each:

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

This example uses a counter to number div elements in the document, and then displays the counter value in h1 tags appearing within them. Because the counters() format is used to output the counter value, nested div elements will be numbered hierarchically (e.g. "Division 2.1.3").

div {
  counter-increment: division;
}
div > h1:before {
  content: "Division " counters(division,".") ": ";
}