HTML and CSS Reference
In-Depth Information
counter-increment
This property controls CSS counter values.
Syntax
counter-increment:
counter-name1
[
integer
] ...
counter-nameN
[
integer
] |
none | inherit
The syntax shows the property accepts one or more counter names (
counter-nameX
), each
one optionally followed by an integer. The
integer
indicates by how much the counter is
incremented or decremented for every occurrence of the element. The default increment is
1
.
Zero and negative integers are allowed.
Examples
div.section:before {content: "Section: " counter(section) ". ";
counter-increment: section;}
/* Add 1 to section */
h1.chapter:before {content: counter(chapterno, upper-latin) ". ";
counter-increment: chapterno;}
.topten:before {content: counter(countdown) ". ";
counter-increment: countdown -1; }
Compatibility
CSS 2, 3
IE 8+
Firefox 1.5+
Opera 7+, Safari 3+
counter-reset
This property contains a list of one or more counter names to be cleared or set to a particular
value.
Syntax
counter-reset:
counter-name1
[
integer
] ...
counter-nameN
[
integer
] | none |
inherit
The syntax shows the property accepts one or more names of counters, each one optionally
followed by an integer. The
integer
indicates what the counter value should be set to; when
a value is not specified, the counter is set to
0
.
Examples
div.chapter {counter-reset: section;}
/* Set section to 0 */
ol {counter-reset: sectioncount listcount x y;}
/* Sets four counters to 0 */
#foo {counter-reset: globalCount 5;}
/* set to 5 for some reason */
