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.
|Applies to:||All elements|
|Animatable:||No. See animatable properties.|
|Version:||CSS 2, 3|
The syntax of the property is given with:
The example below shows the
counter-reset property in action.
ExampleTry this code »
content: "Section " counter(section) ". ";
content: counter(section) "." counter(category) " ";
The following table describes the values of this property.
|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.|
||No counters will be reset. This is default value.|
||Sets this property to its default value.|
||If specified, the associated element takes the computed value of its parent element
counter-reset property is supported in all major modern browsers.
Warning: Internet Explorer 7 and earlier versions don't support the
counter-increment property. IE8 supports only if a valid
<!DOCTYPE> is specified.
See tutorial on: CSS Pseudo Elements.