[ @sdxc/u/general ]

counter-increment

Applies counter-increment to 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 { counterIncrement } from "@sdxc/u/general";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.counterIncrement("section")`	`css({ counterIncrement: "section" })`
`u.counterIncrement("section", 2)`	`css({ counterIncrement: "section 2" })`

Examples

Basic example

Use counterIncrement(name) on each element that should count, then print the counter with counter(name) in a pseudo-element:

The lighthouse keeper

A storm in October

What the tide left

<section mix={[counterReset("chapter"), ...]}>
	<h3
		mix={[
			counterIncrement("chapter"),
			text("lg"),
			weight("semibold"),
			before([pseudoContent('"Chapter " counter(chapter) " · "'), fg("neutral.muted")]),
		]}
	>
		The lighthouse keeper
	</h3>
	<h3
		mix={[
			counterIncrement("chapter"),
			text("lg"),
			weight("semibold"),
			before([pseudoContent('"Chapter " counter(chapter) " · "'), fg("neutral.muted")]),
		]}
	>
		A storm in October
	</h3>
	<h3
		mix={[
			counterIncrement("chapter"),
			text("lg"),
			weight("semibold"),
			before([pseudoContent('"Chapter " counter(chapter) " · "'), fg("neutral.muted")]),
		]}
	>
		What the tide left
	</h3>
</section>

Counting by a step

Pass a second argument to step by more than one, like counterIncrement("line", 10):

PRINT "WHAT IS YOUR NAME?"

INPUT N$

PRINT "HELLO, "; N$

<div mix={[counterReset("line"), font("mono"), ...]}>
	<p
		mix={[
			counterIncrement("line", 10),
			before([pseudoContent('counter(line) "  "'), fg("neutral.muted")]),
		]}
	>
		PRINT "WHAT IS YOUR NAME?"
	</p>
	<p
		mix={[
			counterIncrement("line", 10),
			before([pseudoContent('counter(line) "  "'), fg("neutral.muted")]),
		]}
	>
		INPUT N$
	</p>
	<p
		mix={[
			counterIncrement("line", 10),
			before([pseudoContent('counter(line) "  "'), fg("neutral.muted")]),
		]}
	>
		PRINT "HELLO, "; N$
	</p>
</div>

Applying on a state

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

u.hover(u.counterIncrement("section"))

Responsive design

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

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

Signature

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