[ @sdxc/u/state ]

hasSibling

Sugar over when("&:has(~ {selector})", input), styling an element by a sibling's state.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.hasSibling("input:checked", u.bg("brand.solid"))`	`css({ "&:has(~ input:checked)": { backgroundColor: "..." } })`
`u.hasSibling("input:disabled", u.opacity(50))`	`css({ "&:has(~ input:disabled)": { opacity: 0.5 } })`

Examples

Basic example

Pass a selector to hasSibling() to style an element by a sibling that comes after it. Tick the checkbox:

Available for work

<label mix={[hstack({ gap: 2, align: "center" }), text("sm")]}>
	<span
		mix={[
			circle(),
			is(3),
			bg("neutral.solid"),
			hasSibling("input:checked", bg("success.solid")),
			transition("background-color"),
		]}
	/>
	<input type="checkbox" mix={[accent("success")]} />
	Available for work
</label>

Responsive design

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

u.at("md", u.hasSibling("input:checked", u.bg("brand.solid")))

Signature

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