CSS counter-reset property

Examples

And on the part of sub-section numbering (eg "Section 1", "1.1", "1.2") method:

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) " ";
}


Attribute definitions and instructions

counter-reset or reset the property to create one or more counters.

counter-reset property and is usually counter-increment property, content attribute.

Defaults: none
inherit: no
version: CSS2
JavaScript syntax: object .style.counterReset = "subsection"


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support the counter-reset property.

Note: IE8 only the specified DOCTYPE supported counter-reset property!.


Property Value

value Explanation
none default. You can not select the counter reset
id number id defined reset the counter selector, id or class. You can set this number selector counter the number of occurrences. Can be positive, zero or negative.
inherit Provisions should inherit the counter-reset property values ​​from the parent element


related articles

Reference the CSS: : the before pseudo-element

Reference the CSS: : the After pseudo-element

Reference the CSS: Content Properties

Reference the CSS: counter-INCREMENT attribute