counter-reset
Create named CSS counters and choose their initial values.
Overview
| Class | Declarations |
|---|---|
counter-reset:none | counter-reset: none;
|
counter-reset:<name> | counter-reset: <name>;
|
counter-reset:<name>|<integer> | counter-reset: <name> <integer>;
|
counter-reset:reversed(<name>) | counter-reset: reversed(<name>);
|
counter-reset:reversed(<name>)|<integer> | counter-reset: reversed(<name>) <integer>;
|
counter-reset:<name>|<integer>|<name>|<integer> | counter-reset: <name> <integer> <name> <integer>;
|
Basic usage
Create a section counter
Create section with an initial value of zero. The first increment occurs on the first heading, so the displayed values begin at 1.
<!-- Scope · this article --><article id="target" class="counter-reset:section"> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before">Setup</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before">Usage</h2></article>Resetting a counter creates a new instance at that element. Descendants use that instance; use counter-set when you want to update the current value in the flow.
Start from another number
Specify an integer after the counter name. This article initializes chapter to 4, then its headings increment to 5 and 6.
<!-- Initial 4 · first heading 5 --><article id="target" class="counter-reset:chapter|4"> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:chapter text-blue::before content:counter(chapter)'.\00a0'::before">Advanced topics</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:chapter text-blue::before content:counter(chapter)'.\00a0'::before">Deployment</h2></article>Create a reversed counter
Where supported, reversed(step) derives an initial value from the elements that decrement that counter. This three-item example counts 3, 2, 1. The base rule explicitly starts at 4, so unsupported browsers show the same countdown using the authored −1 step.
<!-- Native support · explicit countdown fallback --><p class="mx:0 mb-2xs mt:0 font-sm hidden@supports((counter-reset:reversed(step)))">Explicit fallback · starts at 4</p><p class="hidden mx:0 mb-2xs mt:0 font-sm block@supports((counter-reset:reversed(step)))">Native reversed() · item-derived start</p><ol id="target" role="list" reversed class="m:0 p:0 font-md leading-lg list-style:none counter-reset:step|4 counter-reset:reversed(step)@supports((counter-reset:reversed(step)))"> <li class="mb-2xs counter-increment:step|-1 text-blue::before content:counter(step)'.\00a0'::before">Final review</li> <li class="mb-2xs counter-increment:step|-1 text-blue::before content:counter(step)'.\00a0'::before">Deploy</li> <li class="mb-2xs counter-increment:step|-1 text-blue::before content:counter(step)'.\00a0'::before">Monitor</li></ol>The visible status and computed reset identify which rule your browser uses. The fallback’s 4 is authored for these three items; it does not automatically track added items. Check support in your target browsers, or use <ol reversed> for an ordinary reversed list.
Apply conditionally
Resize past sm to initialize this chapter counter at 4 on screen. The headings change from 1, 2 to 5, 6. Print resets the initial value to zero.
<!-- Real viewport · initial 0 or 4 --><article id="target" class="counter-reset:chapter counter-reset:chapter@print counter-reset:chapter|4@screen@sm"> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:chapter text-blue::before content:counter(chapter)'.\00a0'::before">Setup</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:chapter text-blue::before content:counter(chapter)'.\00a0'::before">Usage</h2></article>The readout reports the article’s initial value, before any heading increments it.