CSS3 Examples

CSS COUNTER-RESET

Written by jon on 1:19 AM The ‘counter-reset’ property acts like a variable assignment in a programming language - it sets a new value for the specified counter whenever the current CSS selector is encountered. The property lists one or more counter labels, each followed by an optional integer reset value (default reset value is 0.)
If a counter is reset AND rendered using a single CSS selector (with the ‘content’ property and ‘before:’/'after:’ pseudo-elements), it should be reset first, then rendered. If a single CSS selector both increments and resets a counter, it is reset, then incremented.

Example

h1:before {counter-increment: main-heading; counter-reset: sub-heading; content: “Section ” counter(main-heading) “:” }

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none Suppresses reseting of counters for the current selector. [identifier integer] Specifies one or more counters to reset and the values to reset each one to.