Note: This documentation is preliminary and is subject to change.
Sets or retrieves
a list of counters to increment.
Syntax
HTML |
{ counter-increment : sCounter }
|
---|
Scripting | [ sCounter = ] object.style.counterIncrement [ = v ] |
---|
Possible Values
sCounter | String that
specifies or receives
a space-delimited list of counters, including one or both of the
following values.
identifier |
The name of the counter, optionally followed by an
increment.
| increment |
An integer that indicates by how much the counter is
incremented for every occurrence of the element.
Zero and negative integers are allowed.
|
|
The property is read/write
for all objects except the following, for which it is read-only:
currentStyle.
The property has no default value. The Cascading Style Sheets (CSS) attribute is
not inherited.
Remarks
The
counter-increment
attribute can contain a list of one or more counters,
each one optionally followed by an integer. The integer represents
the amount that the counter is incremented after each occurrence
of an element.
This property is used to generate numbered content for each occurrence
of an element. The counter need not be defined before it is incremented.
To reset a counter value, use the
counter-reset
attribute.
An element that is not displayed
(display
attribute set to 'none') and pseudo-elements that do not generate content
(content
attribute set to 'normal') cannot increment or reset a counter.
This property requires Internet Explorer to be in
IE8 mode rendering.
Example
The following example demonstrates automatic
chapter and section numbering using
counter-reset,
counter-increment,
and content.
The chapter
counter is set to zero for the
BODY element,
and then incremented for each H1
element encountered. The section
counter is
reset for each H1 element and
incremented for each H2 element.
When the page is viewed, each
H1 element is preceded by
a chapter heading of the form
"Chapter
X. "
,
while each H2 element is preceded by
a section number of the form
"
X.N "
.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
BODY {
counter-reset: chapter; /* Create a chapter counter */
}
H1 {
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H1:before {
content: "Chapter " counter(chapter) ". ";
}
H2 {
counter-increment: section;
}
H2:before {
content: counter(chapter) "." counter(section) " ";
}
</style>
Standards Information
This property is defined in
Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) .
Applies To
|
currentStyle,
runtimeStyle,
style,
A,
ABBR,
ADDRESS,
B,
BIG,
BLOCKQUOTE,
BODY,
BUTTON,
CAPTION,
CENTER,
CITE,
CODE,
COL,
COLGROUP,
DD,
DFN,
DIR,
DIV,
DL,
DT,
EM,
FIELDSET,
FORM,
hn,
HTML,
I,
IMG,
INPUT type=button,
INPUT type=checkbox,
INPUT type=file,
INPUT type=image,
INPUT type=password,
INPUT type=radio,
INPUT type=reset,
INPUT type=submit,
INPUT type=text,
KBD,
LABEL,
LEGEND,
LI,
LISTING,
MARQUEE,
MENU,
NOBR,
OL,
P,
PRE,
S,
SAMP,
SMALL,
SPAN,
STRIKE,
STRONG,
SUB,
SUP,
TABLE,
TBODY,
TD,
TEXTAREA,
TFOOT,
TH,
THEAD,
TR,
TT,
U,
UL,
VAR,
XMP |
See Also
counterReset