counter-increment (CSS property)

Spec
Inherited Initial Version
No none CSS2
Browser support (more…)
IE8+ FF1+ SA3.1+ OP9.2+ CH2+
Full Full Full Buggy Full

Syntax

counter-increment: { identifier  [ integer ] 1 or more pairs | none | inherit }  …;

Description

This property increments one or more counter values.

A counter is identified by a name that’s normally established by using the counter in the counter-reset property. Counters can be nested: if an element has the counter C, and a child element resets that counter name, it won’t reset the parent’s counter, but instead will create a new, nested counter, C.

Example

These style rules prepend a number to all h2 headings, incrementing the value for each heading:

h1 {
  counter-reset: section;
}
h2:before {
  counter-increment: section;
  content: counter(section) ". ";
}

Value

The value none indicates that no counters will be incremented.

If one or more identifiers are specified, each named counter will be incremented. If an integer value is specified after the identifier, the counter value is incremented by that amount. The default increment is 1; zero, or negative values, are allowed.

If an identifier refers to a counter that hasn’t been initialized by counter-reset, the default initial value is 0.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None Full Full Full Full Full Full None None Full Full Buggy Buggy Buggy Full

Internet Explorer for Windows versions up to and including 7 don’t support generated content or counters.

Safari versions less than 3 don’t support this property.

In Opera versions up to and including 10, counters used without a counter-reset property have global scope, instead of the scope of the elements for which they’re used.

User-contributed notes

There are no comments yet.

Related Products