Counters and Numbering

Counters are the mechanism provided by CSS to perform numbering. They can be used to number list items, pages, footnotes, sections and any other document content that needs to be numbered.

Counter reset and increment

The counter-reset property applies to any element and initialises one or more counters to the specified values, or to zero if no value is specified.

Unless the resetting of a counter creates a nested counter, the scope of the counter includes the current element and all of its following siblings.

The counter-increment property applies to any element and increments one or more counters by the specified values, or by one if no value is specified.

The counter-increment and counter-reset properties are ignored on elements whose display property has the value none.

div.example1 { counter-reset: h3 h4 }
div.example1 h3 { counter-increment: h3 }
div.example1 h4 { counter-increment: h4 }
div.example1 h3::before { content: counter(h3) }
div.example1 h4::before { 
    content: counter(h4, lower-alpha) 
}

div.example2 { counter-reset: h3 }
div.example2 h3 { 
    counter-increment: h3;
    counter-reset: h4
}
div.example2 h4 { counter-increment: h4 }
div.example2 h3::before { content: counter(h3) }
div.example2 h4::before { 
    counter(h4, lower-alpha) 
}

Nested counters

If a counter is reset on an element and the same counter has also been reset on an ancestor of that element, a nested counter will be created. The scope of the nested counter is the current element only and its final value will not be carried onto its following siblings.

For example, a nested XHTML list with a ul element inside a li inside another ul creates a nested list-item counter.

ol { counter-reset: list-item }
li { counter-increment: list-item }
li::marker { 
    content: counters(list-item, ".", decimal);
    color: brown;
    font-weight: bold
}

Counter styles

Counter values are displayed as decimal numbers by default, but they may be displayed using other styles such as roman numerals or consecutive letters of the alphabet.

chapter { counter-increment: chapter-num }

chapter::before {
    content: "Chapter " counter(chapter-num, upper-roman)
}

The following table shows examples of the various counter styles: