CSS counter-incrementProperty
Example
A method for numbering 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) " ";
}
Try it Yourself »
Property definition and usage instructions
The counter-increment property increments one or more counter values.
The counter-increment property is typically used in conjunction with the counter-reset property and the content property.
| Default value: | none |
|---|---|
| Inherited: | no |
| version: | CSS2 |
| JavaScript Syntax: | object.style.counterIncrement="subsection" |
Browser Support
All major browsers support the counter-increment property.
Note:IE8 only supports the counter-increment property if a !DOCTYPE is specified.
Property value
| Value | Description |
|---|---|
| none | No counter will increment |
| id number | id defines the selector, id, or class whose count will be increased. number defines the increment. number can be positive, zero, or negative. |
| inherit | The value of the counter-increment property should be inherited from the parent element. |
Related Articles
CSS Reference Manual::before pseudo-element
CSS Reference Manual::after pseudo-element
CSS Reference Manual:content property
CSS Reference Manual:counter-reset property
other extensions