counter-reset

Jump to: navigation, search

counter-reset



Summary

The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer (otherwise, the integer defaults to 0.) Each time the given element is invoked, the counters specified by the property are set to the given integer.

Overview table

Initial value none
Applies to All elements
Inherited No
Media visual
Computed value
Animatable No
CSS Object Model Property

Syntax

  • counter-reset: identifier
  • counter-reset: integer


Values

identifier
The name of the counter, optionally followed by an integer.
integer
The value to which the counter is set when the element is invoked. The default value is 0.


Examples

View live exampleThe 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 "ChapterX.", while each h2 element is preceded by a section number of the form "X.N".

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) " ";
}

Notes

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

Syntax

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

Standards information

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Generated and Replaced Content





  • counter-reset







Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]