CSS `counter-reset` Property

Example

Method to number sections and subsections (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) " ";
}

Property Definition and Usage

The counter-reset property creates or resets one or more counters.

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

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

Browser Support

All major browsers support the counter-reset property.

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

Property Values

Value	Description
none	Default. The counter cannot be reset for the selector
id number	id defines the selector, id, or class to reset the counter.
number sets the value of the counter for the number of times the selector appears. It can be a positive number, zero, or a negative number.
inherit	Specifies that the value of the `counter-reset` property should be inherited from the parent element

CSS reference::before pseudo-element

CSS reference::after pseudo-element

CSS reference:content property

CSS reference:counter-increment property

❮ Pr Background Color Css3 Pr Align Content ❯

CSS counter-reset Property

Example

Property Definition and Usage

Browser Support

Property Values

Related Articles

CSS `counter-reset` Property