counter-increment

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Short information
CSS CSS2
Default value none
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
Description
The style element counter-increment is intended for value increase of the counter of increments which is specified by the parameter counter-reset. Such counter counts up quantity of elements displays on a page and can be deduced with the help of property content and pseudo-elements after and before. It allows creation of lists (including multilevel). Numbering and a kind are specified through styles.

Syntax

counter-increment: none | [identifier] | [integral number]
Arguments
none
It cancels increase in the counter for the current selector
identifier
It specifies one or several variables for which it is required to change value of the counter. Variables are divided among themselves by a blank.
Integral number
It defines value of a counter increment. It is equal 1 by default. It is supposed to use negative and zero values.
Possible combinations of the parameters values counter-reset and counter-increment are shown in tab. 1.

Tab. 1. Replacing of the list numbering
Code Result
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
The list begins from 0.
0, 1, 2
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}
All even numbers are deduced.
2, 4, 6
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}
All odd numbers are deduced.
1, 3, 5
LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
The list begins from 10.
10, 11, 12
Example
 
<!--
   BODY {
    counter-reset: heading; /* Initiate the counter */
   }
   H2:before {
    counter-increment: heading; /* Specify the counter identifier */
    content: "Chapter " counter(heading) ". "; /* Output the text before the tag <H2> content */
   }
 
-->
<h2>Theory of lion-hunting in the desert</h2>
<h2>Methods of inverse kinematics</h2>
<h2>Lion-hunting by numerical methods</h2>
The result of this example is shown on the figure 1

Remark
For the elements having the property "display : none" the counter value doesn't change