counter-reset (CSS property)

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


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


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.


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


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.


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.

User-contributed notes

by sova
Thu, 04 Mar 2010 18:09:18 GMT
This note has not yet been confirmed for accuracy and relevance.

Both here on the "Play" tab and here: Firefox 3.6 refuses to show your entire sandbox.

by brothercake
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