counter-reset (CSS property)

Spec
Inherited Initial Version
No none CSS2
Browser support (more…)
IE8+ FF1+ SA3.1+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

counter-reset: { identifier  [ integer ] 1 or more pairs | none | inherit }  …;

Description

This property creates or resets one or more counters. The created counters have a scope: the element for which the counter is created, its following siblings, and all descendants of the element and its following siblings.

The counter-reset property is usually used in conjunction with counter-increment to handle automatic numbering, and with content to display the generated counter values.

Example

These style rules assign a two-level numbering system for tables. One counter is incremented for body row groups, and the other for each row. The value in the first cell in each row is prepended with the two counters, such as A.1, A.2, A.3, and so on.

table {
  counter-reset: group;
}
tbody {
  counter-increment: group;
  counter-reset: row;
}
tbody tr {
  counter-increment: row;
}
tbody td:first-child:before {
  content: counter(group, upper-latin) "." counter(row);
}

Value

The value none ensures that no counters will be reset.

If one or more identifiers are specified, each named counter will be reset. If an integer value is specified after the identifier, the counter is reset to that value. The default reset value is 0.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None Full Full Full Full Full Full None None Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 don’t support generated content or counters.

Safari versions less than 3 don’t support this property.

In Opera up to and including 10, counters used without a counter-reset have global scope, instead of the scope of the elements for which they’re used.

Previous / Next page

  1. Previous
  2. Next

Related reference material

  • content
    inserts content before or after an element

User-contributed notes

ID:
#3
Contributed:
by sova
Date:
Thu, 04 Mar 2010 18:09:18 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Both here on the "Play" tab http://reference.sitepoint.com/css/counter-reset/demo and here: http://reference.sitepoint.com/css/counter-increment/demo Firefox 3.6 refuses to show your entire sandbox.

ID:
#2
Contributed:
by brothercake
Date:
Tue, 08 Apr 2008 04:18:01 GMT

The code example here is getting clipped such that some of it is not visible, making it look like it's incomplete.

Related Products