# counter-reset

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

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

Applies `counter-reset`, creating or resetting the element's CSS counter
named by the bare counter identifier `name`. `value` is the integer the
counter is set to; omit it to fall back to CSS's own default of `0`.

## 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)`:

```tsx
<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:

```tsx
<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.

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

## Responsive design

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

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

## Signature

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