counter-reset

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. The reversed() functional notation can be used to mark the counter reversed.

<integer>

The initial value to set on the newly created counter. 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.

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.

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

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.

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

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.

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

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.

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

<reversed-counter-name> = 
  reversed( <counter-name> )  

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

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:

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

Result

Using counter-reset, we set the implicit list-item counter to start counting at 3 for every ol. Then, the first item would be numbered 4, second would be numbered 5, etc., similar to the effect of writing <ol start="4"> in HTML.

In the following example, we've declared a reversed counter named 'priority'. The counter is being used to number five tasks.

<ul class="stack">
  <li>Task A</li>
  <li>Task B</li>
  <li>Task C</li>
  <li>Task D</li>
  <li>Task E</li>
</ul>

@supports not (counter-reset: reversed(priority)) {
  .stack {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support the reversed counters yet.";
  }
}

li::before {
  content: counter(priority) ". ";
  counter-increment: priority -1;
}

.stack {
  counter-reset: reversed(priority);
  list-style: none;
}

In the output, the items are numbered in reversed order from 5 to 1. Notice in the code we haven't specified the counter's initial value. The browser automatically calculates the initial value at layout-time using the counter increment value.

• 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