What CSS pseudo-element is used to style selected text?

The CSS pseudo-element used to style selected text is ::selection. It matches the portion of a document that a user has highlighted, such as text selected with a mouse, keyboard, or touch interaction. Authors can use it to customize the highlight’s appearance instead of relying entirely on the browser’s default colors.

A typical rule is ::selection { color: white; background-color: navy; }. Support is intentionally limited to properties appropriate for highlighted text; color and background-color are the most widely useful choices. Properties such as background-image generally do not produce the expected result.

The double colon matters because ::selection is a pseudo-element, representing a temporary portion of rendered content rather than a normal element in the document tree. :selected is not the standard selector for text highlighting. ::marker styles list markers, while the newer ::highlight() pseudo-element is associated with named custom highlights created through the CSS Custom Highlight API.

Designers should preserve readable contrast in custom selections. The selection highlight is part of basic text interaction, so overly subtle colors or low-contrast combinations can make copying and reviewing text harder, particularly for users with low vision.