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 yourself »

Definition and Usage

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

The counter-increment property is usually used together with the counter-reset property and the content property.

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

Browser Support

The counter-increment property is supported in all major browsers.

Note: IE8 supports the counter-increment property only if a !DOCTYPE is specified.

Property Values

Value	Description
none	No counters will be incremented
id number	The id defines which counter that should be incremented. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. 0 or negative values, are allowed. If the id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
inherit	Specifies that the value of the counter-increment property should be inherited from the parent element