Note: This documentation is preliminary and is subject to change.
Sets or retrieves
a list of counters to create or reset to zero.
Syntax
HTML |
{ counter-reset : sCounter }
|
---|
Scripting | [ sCounter = ] object.style.counterReset [ = 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
integer.
| integer |
The initial value of the counter. The default value is 0.
|
|
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-reset
attribute can contain a list of one or more counters,
each one optionally followed by an integer. The integer represents
the value that the counter is set to after each occurrence
of the element.
If an element both resets and increments a counter, the counter is
reset first and then incremented. If the same counter is specified
more than once, each reset or increment of the counter is processed
in the order specified.
The
counter-increment
and
counter-reset
attributes follow the rules of the CSS cascade. Given two style
declarations with the same specificity, only the last one encountered
will be processed. For more information about cascade and specificity,
see Understanding CSS Selectors.
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.
Examples
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>
Because of a conflicting set of style rules, in the following example
only the imagenum
counter is reset.
To reset both counters, put them together in the same rule.
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
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
counterIncrement