counter-reset (CSS property)
| IE7 | FF1+ | Saf3 | Op9.2+ |
|---|---|---|---|
| None | Full | None | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS2 |
Example
These style rules assign a two-level numbering system for tables. One counter is incremented for body row groups, and the other for each row. The value in the first cell in each row is prepended with the two counters, such as A.1, A.2, A.3, and so on.
table {
counter-reset: group;
}
tbody {
counter-increment: group;
counter-reset: row;
}
tbody tr {
counter-increment: row;
}
tbody td:first-child:before {
content: counter(group, upper-latin) "." counter(row);
}Description
This property creates or resets one or more counters. The created counters have a scope: the element for which the counter is created, its following siblings, and all descendants of the element and its following siblings.
The
counter-reset property is usually used in conjunction
with counter-increment
to handle automatic numbering, and with content to display the
generated counter values.
Value
The value none
ensures that no counters will be reset.
If one or more identifiers
are specified, each named counter will be reset. If an integer value is
specified after the identifier, the counter is reset to that value. The
default reset value is 0.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | None | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | None |
| 2.0 | None | |
| 3.0 | None | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for Windows versions up to and including 7 don’t support generated content or counters.
Safari versions up to and including 3 don’t support this property.
In Opera, counters used without a
counter-reset have global scope, instead of the scope
of the elements for which they’re used.
Related Reading
User-contributed notes
- ID:
- #2
- Date:
- Tue, 08 Apr 2008 04:18:01 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
The code example here is getting clipped such that some of it is not visible, making it look like it's incomplete.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
