[ @sdxc/u/state ]

where

Sugar over when("& :where({selector})", input), targeting descendants of the host.

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

import { where } from "@sdxc/u/state";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.where("a", u.fg("brand"))`	`css({ "& :where(a)": { color: "..." } })`
`u.where("th, td", u.p(2))`	`css({ "& :where(th, td)": { padding: "..." } })`

Examples

Basic example

Pass a selector to where() to style the descendants it matches, like the links in content you did not write the markup for:

Read the getting started guide, then browse the API reference.

<article
	mix={[
		where("a", [fg("brand"), textDecoration({ line: "underline", offset: 3 })]),
		...,
	]}
>
	<p>
		Read the <a href="#guide">getting started guide</a>, then browse the{" "}
		<a href="#api">API reference</a>.
	</p>
</article>

Selector lists

Pass a selector list, like where("th, td", …), to reach several kinds of descendant with one call:

Package	Size
@sdxc/u	12 kB
@sdxc/ui	48 kB

<table
	mix={[
		where("th, td", [p(2, 3), textAlign("start")]),
		where("thead th", borderEdge("block-end", { color: "neutral.border", width: 1 })),
		...,
	]}
>
	<thead>
		<tr>
			<th>Package</th>
			<th>Size</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>@sdxc/u</td>
			<td>12 kB</td>
		</tr>
		<tr>
			<td>@sdxc/ui</td>
			<td>48 kB</td>
		</tr>
	</tbody>
</table>

Responsive design

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

u.at("md", u.where("a", u.fg("brand")))

Signature

u.where(selector: string, input: UtilityInput<Node>)