counter-reset
=============

The **`counter-reset`** CSS property creates named CSS counters and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one.

Try it
------

Syntax
------


```css
/\* Create a counter with initial default value 0 \*/
counter-reset: my-counter;

/\* Create a counter and initialize as "-3" \*/
counter-reset: my-counter -3;

/\* Create a reversed counter with initial default value \*/
counter-reset: reversed(my-counter);

/\* Create a reversed counter and initialize as "-1" \*/
counter-reset: reversed(my-counter) -1;

/\* Create reversed and regular counters at the same time \*/
counter-reset: reversed(pages) 10 items 1 reversed(sections) 4;

/\* Remove all counter-reset declarations in less specific rules \*/
counter-reset: none;

/\* Global values \*/
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: revert-layer;
counter-reset: unset;
```

### Values

The `counter-reset` property accepts a list of one or more space-separated counter names or the keyword `none`. For counter names, regular counters use the format `<counter-name>`, and reversed counters use `reversed(<counter-name>)`, where `<counter-name>` is a `<custom-ident>` or `list-item` for the built-in `<ol>` counter. Optionally, each counter name can be followed by an `<integer>` to set its initial value.

`<custom-ident>`

Specifies the counter name to create and initialize using the `<custom-ident>` format.

`<integer>`

 The value to reset the counter to on each occurrence of the element.
 Defaults to `0` if not specified.


`none`

 Specifies that no counter initialization should occur.
 This value is useful for overriding `counter-reset` values in less specific rules.


Description
-----------

The `counter-reset` property can create both regular and, in browsers that support it, reversed counters. You can create multiple regular and reversed counters, each separated by a space. Counters can be a standalone name or a space-separated name-value pair.

After creating a counter using `counter-reset`, you can adjust its value by using the `counter-set` property. This is counterintuitive because, despite its name, the `counter-reset` property is used for creating and initializing counters, while the `counter-set` property is used for resetting the value of an existing counter.

Setting `counter-increment: none` on a selector with greater specificity overrides the creation of the named counter set on selectors with lower specificity.

### Default initial values

The default initial values of both regular and reversed counters make it easy to implement the two most common numbering patterns: counting up from one to the number of elements and counting down from the number of elements to one, respectively. By including a counter value for a named counter, your counter can count up or down, starting at an integer value.

Regular counters default to `0` if no reset value is provided. By default, regular counters increment by one, which can be adjusted with the `counter-increment` property.


```css
h1 {
  /\* Create the counters "chapter" and "page" and set to initial default value.
 Create the counter "section" and set to "4". \*/
  counter-reset: chapter section 4 page;
}
```

### Reversed counters

When creating reversed counters without a value, the counter will start with the value equal to the number of elements in the set, counting down so the last element in the set is `1`. By default, reverse counters decrement by one; this can also be changed with the `counter-increment` property.


```css
h1 {
  /\* Create reversed counters "chapter" and "section".
 Set "chapter" as the number of elements and "section" as "10".
 Create the counter "pages" with the initial default value. \*/
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}
```

### Built-in `list-item` counter

Ordered lists (`<ol>`) come with built-in `list-item` counters that control their numbering. These counters automatically increase or decrease by one with each list item. The `counter-reset` property can be used to reset the `list-item` counters. Like with other counters, you can override the default increment value for `list-item` counters by using the `counter-increment` property.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

counter-reset =   
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |  
  none                                                  
  
<reversed-counter-name> =   
  reversed( <counter-name> )    
  
```

Examples
--------

### Overriding the `list-item` counter

In this example, the `counter-reset` property is used to set a starting value for an implicit `list-item` counter.

#### HTML


```html
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>
```


#### CSS

Using `counter-reset`, we set the implicit `list-item` counter to start at a value other than the default `1`:


```css
ol {
  counter-reset: list-item 3;
}
```


#### Result

Using `counter-reset`, we were able to set the implicit `list-item` counter to start counting at `3`, similar to the effect of writing `<ol start="3">` in HTML.

Specifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-reset |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS Counters guide
* `counter-increment` property
* `counter-set` property
* `@counter-style` at-rule
* `counter()` and `counters()` functions
* `content` property
* `::marker` pseudo-class
* CSS lists and counters module
* CSS counter styles module