CSS counter-increment property


How to number parts and sub-parts (such as "Section 1," "1.1," "1.2"):

body
{
counter-reset:section;
}

h1
{
counter-reset:subsection;
}

h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}

h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

Try it out . . .

Description of property definition and use

The counter-increment property increments one or more counter values.

The counter-increment property is typically used for the count-reset property and the content property.

Default: none
Inherited: no
Version: CSS2
JavaScript syntax: object .style.counterIncrement="subsection"

Browser support

CSS counter-increment property CSS counter-increment property CSS counter-increment property CSS counter-increment property CSS counter-increment property

All major browsers support the count-increment property.

Note: I E8 is only specified! DOCTYPE only supports the count-increment property.

The property value

Value Description
none No counters will increment
id number The id defines the selector, id, or class that will increase the count. n umber defines the increment. Number can be positive, zero, or negative.
inherit Specifies the value of the countyer-increment property, which should be inherited from the parent element

Related articles

CSS Reference Manual: :before Pseudo-Elements

CSS Reference Manual: :After Pseudo-Elements

CSS Reference Manual: Content Properties

CSS Reference Manual: counter-reset property