CSS/Properties/counter-reset
From W3C Wiki
< CSS | Properties
- List of Properties
- Generated content
- content
- quotes
- counter-reset
- counter-increment
- Generated content
Contents |
counter-reset
The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.
Description
| Values | [ <identifier> <integer>? ]+ | none | inherit |
|---|---|
| Initial value | none |
| Applies to | all elements |
| Inherited | No |
Values
<identifier>
The name of the counter to reset.
<integer>
The value to reset the counter to on each occurrence of selector. Defaults to 0.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
body{
counter-reset: chapter 0;
}
h1{
counter-reset: sub-chapter 0;
}
h1:before{
counter-increment: chapter;
content: "Chapter " counter(chapter) ". ";
}
h2:before{
counter-increment: sub-chapter;
content: counter(chapter) "." counter(sub-chapter) ": ";
}
[index.html]
<body> <h1>Font Properties</h1> <h2>font-size</h2> <h2>font-weight</h2> <h2>font-family</h2> <h1>Background Properies</h1> <h2>background-color</h2> <h2>background-position</h2> <h2>background-repeat</h2> </body>
CSS Reference
The CSS specification defines the counter-reset property in 12.4 Automatic counters and numbering.
