CSS counter-reset Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The counter-reset CSS property is used in combination with the counter-increment property for creating auto-incrementing counters, and with the content property to display the generated counter values.
The following table summarizes the usages context and the version history of this property.
| Default value: | none |
|---|---|
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | CSS 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the counter-reset property in action.
Example
Try this code »body {
counter-reset: section;
}
h1 {
counter-reset: category;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: category;
content: counter(section) "." counter(category) " ";
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| identifier | The name of the counter to reset. |
| integer | The value to reset the counter on each occurrence of selector. The default reset value is 0. |
none |
No counters will be reset. This is default value. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element counter-reset property. |
Browser Compatibility
The counter-reset property is supported in all major modern browsers.
 |
Basic Support—
|
Internet Explorer 7 and earlier versions don't support the counter-increment property. IE8 supports only if a valid <!DOCTYPE> is specified.
Further Reading
See tutorial on: CSS Pseudo Elements.
Related properties: content, counter-increment.
