| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS2 |
| IE8+ | FF1+ | SA3.1+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Buggy | Full |
Syntax
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.
