CSS counter-increment 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) " ";
}
{
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"
Attribute definitions and instructions
counter-increment property increments a counter value or more.
counter-increment property is typically used for counter-reset attributes and content attributes.
Defaults: | none |
---|---|
inherit: | no |
version: | CSS2 |
JavaScript syntax: | object .style.counterIncrement = "subsection" |
Browser Support
All major browsers support the counter-increment property.
Note: IE8 only the specified DOCTYPE supported counter-increment property!.
Property Value
value | Explanation |
---|---|
none | No counter is incremented |
id number | id definition will increase the count selector, id or class. number defined increments. number can be positive, zero or negative. |
inherit | Value specified counter-increment property should be inherited from the parent element |
related articles
CSS Reference Manual: : the before pseudo-element
CSS Reference Manual: : the After pseudo-element
CSS Reference Manual: Content Properties
CSS Reference: counter-RESET property