CSS counter-reset property
How to number parts and sub-parts (such as "Section 1," "1.1," "1.2"):
{
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 out . . .
Description of property definition and use
The counter-reset property creates or resets one or more counters.
The counter-reset property is usually used with the count-increment property, the content property.
| Default: | none |
|---|---|
| Inherited: | no |
| Version: | CSS2 |
| JavaScript syntax: | object .style.counterReset="subsection" |
Browser support
All major browsers support the count-reset property.
Note: I E8 is only specified! DOCTYPE only supports the count-reset property.
The property value
| Value | Description |
|---|---|
| none | Default. The selector's counter cannot be reset |
| id number | id defines the selector, id, or class that resets the counter. N umber sets the value of the counter for the number of times this selector appears. It 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