CSS counter-resetProperty
Example
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 »
Attribute Definition and Usage Instructions
The counter-reset property creates or resets one or more counters.
The counter-reset property is typically used together 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 supports the counter-reset property only if a !DOCTYPE is specified.
Property value
| Value | Description |
|---|---|
| none | Default. The selector's counter cannot be reset. |
| id number | id Defines the selector, id, or class for which the counter is reset. number The value of the counter can be set to the number of times this selector appears. Can be positive, zero, or negative. |
| inherit | Specifies that the value of the counter-reset property should be inherited from the parent element. |
Related Articles
CSS reference: :before pseudo-element
CSS reference: :after pseudo-element
CSS reference: content property
CSS reference: counter-increment property
other extensions