counterReset Property (currentStyle, runtimeStyle, style, ...)

counter-reset Attribute | counterReset Property

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 ]

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