CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES

CSS counter-reset Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The counter-reset CSS property is used in combination with the counter-increment property for creating auto-incrementing counters, and with the content property to display the generated counter values.

The following table summarizes the usages context and the version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 2, 3

Syntax

The syntax of the property is given with:

counter-reset: 
[ identifier integer ]1 or more pairs | none | initial | inherit

The example below shows the counter-reset property in action.

  • body {
  •     counter-reset: section;
  • }
  • h1 {
  •     counter-reset: category;
  • }
  • h1:before {
  •     counter-increment: section;
  •     content: "Section " counter(section) ". ";
  • }
  • h2:before {
  •     counter-increment: category;
  •     content: counter(section) "." counter(category) " ";
  • }

Property Values

The following table describes the values of this property.

Value Description
identifier The name of the counter to reset.
integer The value to reset the counter on each occurrence of selector. The default reset value is 0.
none No counters will be reset. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element counter-reset property.

Browser Compatibility

The counter-reset property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1.5+
  • Google Chrome 2+
  • Internet Explorer 8+
  • Apple Safari 3+
  • Opera 9.2+

Warning: Internet Explorer 7 and earlier versions don't support the counter-increment property. IE8 supports only if a valid <!DOCTYPE> is specified.


Further Reading

See tutorial on: CSS Pseudo Elements.

Related properties: content, counter-increment.

Your Feedback:

We would love to hear from you, please drop us a line.