CSS2 » Properties » counter-increment

Version: Level 2

Compability: Currently not supported by any browser.

Syntax:
counter-increment : none | identifier number
none
The none value prevents the counter from incrementing.
identifier number
The identifier value part of the pair is mandatory. It identifies the counter. It can refer to a class, id, or selector. The optional number value is the numeric value used to increment the counter. It can be zero or any positive or negative integer. If omitted, the default is one.

The counter-increment property is a blank space delimited list of one or more identifier/number pairs associated with a selector. The pair sets the numeric value by which the named counter will be incremented each time the specified selector is encountered. The number part of the pair is optional and the default is to increment by one. This property is not inherited.

For example, you could consecutively number paragraphs, sections of a text, and images.
 
If the display property is set to none, then you cannot increment. If the visibility property is set to hidden, then you can increment.
 
You can use the content property to insert counters either before or after a specified element.

Examples

Code:
p:before
{
 content: "paragraph" counter(paragraph);
 counter-increment: paragraph;
}
Language(s): CSS2

See Also: