counter-increment Attribute | counterIncrement Property

Gets or sets a list of counters to increment.

Syntax

CSS	{ counter-increment : sCounter }
Scripting	[ sCounter = ] object.style.counterIncrement [ = sCounter ]

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 Windows Internet Explorer to be in IE8 Standards 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 ".

Copy

<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

A, ABBR, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CSSStyleDeclaration, currentStyle, 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, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

counterReset