# hasSibling

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

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

Sugar over `when("&:has(~ {selector})", input)`, styling an element by a
sibling's state. `~` matches only *following* siblings, so the indicator
must come before the source input in the DOM.

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

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

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

## Signature

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