文字與排版
counter-setcounter-set
Setting existing CSS counters to specific values on selected elements.
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
Use counter-set to set an existing counter to a specific value on selected elements. MDN recommends counter-reset for creating counters and counter-set for changing a counter value in the flow.
- Install dependencies
- Jump to the deployment checklist
- Verify production
<ol class="counter-reset:step list-style:none"> <li class="counter-increment:step content:counter(step)::before inline-flex::before r:full::before">Install dependencies</li> <li class="counter-increment:step counter-set:step|9 content:counter(step)::before inline-flex::before r:full::before">Jump to the deployment checklist</li> <li class="counter-increment:step content:counter(step)::before inline-flex::before r:full::before">Verify production</li></ol>Set multiple counters
Separate counter names and values with | to set more than one counter in the same declaration.
Current position
<h2 class="counter-set:chapter|2|section|4 content:'Chapter\00a0'counter(chapter)',\00a0section\00a0'counter(section)::before">Resume point</h2>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="counter-set:section|4:hover counter-set:section|4@sm counter-set:section|4@dark counter-set:section|4@print">…</div>