Little Web Hut

CSS 2.1 Reference: counter-reset Property

CSS counter-reset Property
Syntax
selector {counter-reset: value1 value2;}
  • value1 is specified by using an counter-identifier.
  • value2 is OPTIONAL. It is specified by using an integer.
  • value1 along with the optional value2 form a value pair. Value pairs occur one or more times. If more than one value pair occurs then the value pairs are separated by spaces.
(OR)
selector {counter-reset: value;}
  • value is specified by using one of the following keywords: none or inherit.
Usage

The counter-reset property is used to reset counter values when the associated element occurs. One or more counter names can be specified. Each counter name can optionally be followed by an integer which is used as the reset value. If no integer is specified, the counter will be reset to 0. Counter names cannot be any of the following keywords: none, inherit, or initial.


CSS Example: The counter-reset property is set using a single counter name.
  br {counter-reset: tst1;}
  p {counter-increment: tst1;}
  p:before {content: counter(tst1) ". ";}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • none - Counters are not reset.
  • inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.
Applies To All elements
Inherited No
Initial Value none


counter-reset Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe counter-reset property is set using a single counter name.