counter-reset CSS property

Try it

counter-reset: none;

counter-reset: chapter-count 0;

counter-reset: chapter-count;

counter-reset: chapter-count 5;

counter-reset: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counters(chapter-count, ".") ": ";
}

Syntax

/* 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. 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.

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.

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

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.

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

Formal syntax

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

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>  

<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

<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.

Using a reverse counter

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)) {
  body::before {
    content: "Your browser doesn't support the reversed() function.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

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.

Specifications

Browser compatibility

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