[ @sdxc/u/general ]

counter-reset

Applies counter-reset, creating or resetting the element's CSS counter named by the bare counter identifier name.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { counterReset } from "@sdxc/u/general";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.counterReset("section")`	`css({ counterReset: "section" })`
`u.counterReset("section", 0)`	`css({ counterReset: "section 0" })`

Examples

Basic example

Use counterReset(name) on a container to start a counter at zero, then count it up with counterIncrement() and print it with counter(name):

Heat the oven to 200°C.
Toss the squash in oil and salt.
Roast for 35 minutes, turning once.

<ol mix={[counterReset("step"), listStyle(), ...]}>
	<li
		mix={[
			counterIncrement("step"),
			before([pseudoContent('"Step " counter(step) ". "'), weight("bold"), fg("brand")]),
		]}
	>
		Heat the oven to 200°C.
	</li>
	<li
		mix={[
			counterIncrement("step"),
			before([pseudoContent('"Step " counter(step) ". "'), weight("bold"), fg("brand")]),
		]}
	>
		Toss the squash in oil and salt.
	</li>
	<li
		mix={[
			counterIncrement("step"),
			before([pseudoContent('"Step " counter(step) ". "'), weight("bold"), fg("brand")]),
		]}
	>
		Roast for 35 minutes, turning once.
	</li>
</ol>

Setting a starting value

Pass a second argument to start the counter somewhere else, like counterReset("step", 2) so the next step prints 3:

Unscrew the back panel.
Disconnect the battery.

Wait five minutes before touching the board.

Lift out the old fan.
Seat the new one and reconnect.

<div mix={[...]}>
	<ol mix={[counterReset("step"), listStyle()]}>
		<li
			mix={[
				counterIncrement("step"),
				before([pseudoContent('counter(step) ". "'), weight("bold"), fg("brand")]),
			]}
		>
			Unscrew the back panel.
		</li>
		<li
			mix={[
				counterIncrement("step"),
				before([pseudoContent('counter(step) ". "'), weight("bold"), fg("brand")]),
			]}
		>
			Disconnect the battery.
		</li>
	</ol>
	<p mix={[...]}>Wait five minutes before touching the board.</p>
	<ol mix={[counterReset("step", 2), listStyle()]}>
		<li
			mix={[
				counterIncrement("step"),
				before([pseudoContent('counter(step) ". "'), weight("bold"), fg("brand")]),
			]}
		>
			Lift out the old fan.
		</li>
		<li
			mix={[
				counterIncrement("step"),
				before([pseudoContent('counter(step) ". "'), weight("bold"), fg("brand")]),
			]}
		>
			Seat the new one and reconnect.
		</li>
	</ol>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.counterReset("section"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.counterReset("section"))

Signature

u.counterReset(name: string, value?: number)