# selection

> Applies utilities to the element's `::selection`; only `color`, `background-color`, `text-decoration`, and `text-shadow` take effect, and overriding the platform's contrast guarantee requires a high-contrast pair.

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

Applies utilities to the element's `::selection`; only `color`,
`background-color`, `text-decoration`, and `text-shadow` take effect, and
overriding the platform's contrast guarantee requires a high-contrast pair.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.selection(u.bg("brand.tint"))` | `css({ "&::selection": { backgroundColor: "..." } })` |

## Examples

### Basic example

Wrap utilities in `selection()` to style the text a user highlights. Select some of the paragraph:

```tsx
<p mix={[selection([bg("brand.solid"), fg("brand.onSolid")]), ...]}>
	Utilities compose: a state wrapper takes any of them, so the same few calls style a button at
	rest, under the pointer, and while it is pressed.
</p>
```

## Responsive design

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

```ts
u.at("md", u.selection(u.bg("brand.tint")))
```

## Signature

```ts
u.selection(input: UtilityInput<Node>)
```