Little Web Hut

CSS 2.1 Reference: counter-increment Property

CSS counter-increment Property
Syntax
selector {counter-increment: 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-increment: value;}
  • value is specified by using one of the following keywords: none or inherit.
Usage

The counter-increment property is used to increment 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 increment value. If no integer is specified, the counter will be incremented by 1. Negative integer values are permitted. Counter names cannot be any of the following keywords: none, inherit, or initial.


CSS Example: The counter-increment 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 incremented.
  • 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-increment Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe counter-increment property is set using a single counter name.