# not

> A selector wrapper for negated state: wraps `selector` in `:not(...)` and applies the given utilities there.

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

A selector wrapper for negated state: wraps `selector` in `:not(...)` and
applies the given utilities there.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.not(":disabled", u.opacity(100))` | `css({ "&:not(:disabled)": { opacity: 1 } })` |

## Examples

### Basic example

Pass a selector to `not()` to apply utilities everywhere that selector does not match. Hover both buttons:

```tsx
<div mix={[...]}>
	<button
		type="button"
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			not(":disabled", [hover(bg("color.brand.800")), cursor("pointer")]),
			disabled(opacity(50)),
			...,
		]}
	>
		Archive
	</button>
	<button
		type="button"
		disabled
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			not(":disabled", [hover(bg("color.brand.800")), cursor("pointer")]),
			disabled(opacity(50)),
			...,
		]}
	>
		Archive
	</button>
</div>
```

### Every item but the last

Negate a structural pseudo-class, like `not(":last-child", …)`, to separate items without a border after the final one:

```tsx
<ul mix={[...]}>
	<li
		mix={[
			pb(2),
			not(":last-child", borderEdge("block-end", { color: "neutral.border", width: 1 })),
			...,
		]}
	>
		Inbox
	</li>
	<li
		mix={[
			pb(2),
			not(":last-child", borderEdge("block-end", { color: "neutral.border", width: 1 })),
			...,
		]}
	>
		Drafts
	</li>
	<li
		mix={[
			pb(2),
			not(":last-child", borderEdge("block-end", { color: "neutral.border", width: 1 })),
			...,
		]}
	>
		Sent
	</li>
</ul>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.not(":disabled", u.opacity("2.75rem"))
```

## Responsive design

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

```ts
u.at("md", u.not(":disabled", u.opacity(100)))
```

## Signature

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