counter-reset

The counter-reset property is used to define and initialize one or more CSS counters.

It takes one or more identifiers as a value, which specify the names of the counters. Each counter name is optionally followed by an optional <integer> value that specifies the initial value of the counter. The keywords none, inherit and initial must not be used as counter names.

The initial value of the counter is not, however, the first number/value that is displayed when the counter is displayed. This means that if you want your counter to start displaying from one (1), you’ll need to set the initial value in counter-reset to zero. Zero is the default initial value, so if you omit it, it will be reset to zero by default. Negative values are allowed. So, if you want your counter to start displaying from zero, you can set its initial value to -1.

The counter-reset property also takes either none or inherit as values. none will unset a counter, and inherit will inherit the counter reset value from the element’s parent. The default value for the counter-reset property is none.

A counter is reset on an element like so:

article {
    counter-reset: my-counter; /* equivalent to: counter-reset: my-counter 0; */
}
                

The following are all valid counter-reset values:

counter-reset: section 4; /* counter starts displaying at 5 */

counter-reset: counter_2;

counter-reset: number-system 10;
                

The counter-reset property is used in conjunction with the counter-increment property. For more information on how to use the counter-reset property to create counters, see the Using Counters section in the Counters entry.