This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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

See also

Related articles

Generated and Replaced Content

Related pages

Attributions