counter-set
Set the current value of one or more named CSS counters.
Overview
| Class | Declarations |
|---|---|
counter-set:none | counter-set: none;
|
counter-set:<name> | counter-set: <name>;
|
counter-set:<name>|<integer> | counter-set: <name> <integer>;
|
counter-set:<name>|<integer>|<name>|<integer> | counter-set: <name> <integer> <name> <integer>;
|
Basic usage
Set a counter on one item
Set step to 9 on the second item. A counter is reset, incremented, then set on an element in that order, so the second item displays 9 and the following item advances to 10.
<!-- Sequence · 1, 9, 10 --><ol role="list" class="m:0 p:0 font-md leading-lg list-style:none counter-reset:step|0"> <li class="mb-2xs counter-increment:step|1 text-blue::before content:counter(step)'.\00a0'::before">Install dependencies</li> <li id="target" value="9" class="mb-2xs counter-increment:step|1 counter-set:step|9 text-blue::before content:counter(step)'.\00a0'::before">Deployment checklist</li> <li class="mb-2xs counter-increment:step|1 text-blue::before content:counter(step)'.\00a0'::before">Verify production</li></ol>The list item’s HTML value="9" keeps its ordinal consistent with the visible jump. counter-set updates the innermost matching counter; if none exists, it creates one. Use counter-reset to establish an intentional scope.
Set multiple counters
Separate names and integer values with |. This heading sets both chapter and section before reading them in its prefix.
<!-- Two names · one declaration --><h2 id="target" class="m:0 font-md font-medium leading-lg counter-set:chapter|2|section|4 text-blue::before content:'Chapter\00a0'counter(chapter)',\00a0section\00a0'counter(section)':\00a0'::before">Resume point</h2>Neither counter was created earlier in this example. Setting them establishes the two values locally.
Apply conditionally
Resize past sm to set the second section to 9 on screen. The headings change from 1, 2, 3 to 1, 9, 10; print preserves the consecutive sequence.
<!-- Real viewport · conditional jump --><article 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">Overview</h2> <h2 id="target" class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before counter-set:none@print counter-set:section|9@screen@sm">Installation</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">Configuration</h2></article>The conditional set changes the running value, so subsequent headings continue from the new number. The source headings remain unchanged.