counter-increment

Summary

The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer which specifies the value by which the counter should be incremented (e.g. if the value is 2, the counter increases by 2 each time it is invoked).

Overview table

Initial value: none
Applies to: All elements
Inherited: No
Media: visual

Computed value
:

Animatable: No

CSS Object Model Property
:

Syntax

counter-increment: identifier
counter-increment: integer

Values

identifier: The name of the counter. The counter can then be invoked by using counter(<identifier>).
integer: An integer that indicates by how much the counter is

incremented for every occurrence of the element. Zero and negative integers are allowed. If no value is specified, the value defaults to 1.

Examples

This example uses counter-increment and the content properties to prepend headers with an outline-esque, identifier, similar to an ordered list. (Note that the numbering does not reset between the two headers: this can be handled with counter-reset.)

/*
 * Using the CSS 'counter-increment' property.
 */

h1 {
    counter-increment: header;
}

h1:before {
    content: counter(header) ". ";
}

h2 {
    counter-increment: subheader;
}

h2:before {
    content: counter(header) "." counter(subheader) ". ";
}

View live example

This example shows how to specify an integer in the counter-increment property and allow the CSS to increment the counter by values besides 1.

/*
 * Using the CSS 'counter-increment' property with a non-default increment JavaScript.
 */

/* In this example, we specify both an identifier and an integer -- the integer is the number
 * which the counter is increased by every time it is used.
 */
h1 {
    counter-increment: header 3;
}

/* Using the pseudo-element `:after`, we place the counter after each valid `h1` tag. */
h1:after {
    content: counter(header) ". ";
}

View live example

Usage

 It is important to note that counter-increment can handle multiple counters and non-positive integers, though best practices often dictates that counters should be defined separately.

Notes

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.

Syntax

counter-increment: '[ <identifier> <integer> ]'+

Standards information

CSS 2.1, Section 12.4

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

counter-increment

Summary

Overview table

Syntax

Values

Examples

Usage

Notes

Remarks

Syntax

Standards information

See also

Related articles

Generated and Replaced Content

Related pages

Attributions