CSS ::selection Selector

Definition and Usage

The ::selection pseudo-element styles the part of a document the user has highlighted—for example by dragging across text.

Only a small set of properties works (mainly color and background-color). Prefer readable contrast; avoid changing selection purely for decoration.

CSS Syntax

Example: p::selection { color: red; background-color: yellow; }

Allowed Properties

Only these property groups apply to ::selection. Others are ignored.

background-image, margins, padding, borders, and font-size do not apply.

How to Use ::selection

Pick global or scoped selection styles, then keep contrast high.

1. Decide if the rule is global (::selection) or scoped (p::selection).
2. Set color and background-color with strong contrast.
3. Skip unsupported properties.
4. Highlight sample text to verify the look.

Live Preview

Choose a preset, then select the sample text to see ::selection styles.

CSS Examples

Each snippet focuses on ::selection. Extra styles stay minimal for study. Use Try It Yourself for a live editor—then highlight the text.

<style>
  p::selection {
    color: red;
    background-color: yellow;
  }
</style>

<p>Select a fragment of this paragraph, to see how its appearance is affected.</p>

<style>
  ::selection {
    color: gold;
    background-color: red;
  }

  p::selection {
    color: white;
    background-color: blue;
  }
</style>

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

<style>
  p::selection {
    color: #fff;
    background-color: #7c3aed;
    text-shadow: 1px 1px 0 #4c1d95;
  }
</style>

<p>Highlight this line to see a purple selection with a subtle shadow.</p>

Key Takeaways