CSS/Properties/counter-increment
From W3C Wiki
< CSS | Properties
- List of Properties
- Generated content
- content
- quotes
- counter-reset
- counter-increment
- Generated content
Contents
counter-increment
The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.
Description
| Values | [ <identifier> <integer>? ]+ | none | inherit |
|---|---|
| Initial value | none |
| Applies to | all elements |
| Inherited | No |
Values
<identifier>
The name of the counter to increment.
<integer>
The value to add to the counter. Defaults to 1.
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-increment property in 12.4 Automatic counters and numbering.
