# CSS `::selection` Pseudo-element

The `::selection` pseudo-element applies styles to the portion of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

## 1. Syntax

```css
::selection {
  /* styles */
}
```

You can also target the selection within specific elements:

```css
p::selection {
  background: yellow;
  color: black;
}
```

## 2. Allowed Properties

Only a small subset of CSS properties can be used with `::selection` to prevent layout reflows:

*   `color`
*   `background-color`
*   `text-decoration` (and related properties like `text-decoration-color`)
*   `text-shadow`
*   `stroke-color`, `fill-color`, `stroke-width`
*   `cursor`
*   `caret-color`
*   `outline`

Properties like `font-size`, `margin`, or `padding` are ignored.

## 3. Basic Usage

```css
/* Global selection style */
::selection {
  background-color: #ff4081; /* Pink background */
  color: white;              /* White text */
}
```

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]