::selection CSS Pseudo Element

The ::selection pseudo-element in CSS is used to define the styling of text or elements that a user has highlighted, typically with a mouse or keyboard. When a user selects content in a webpage, the browser applies a default background and text color to indicate the selection. The ::selection pseudo-class allows developers to override these defaults, providing a more cohesive or branded experience that aligns with the site's design. For example, you can change the background color, text color, or even add text shadows when the selection occurs.

This pseudo-element can be applied to nearly all visible elements containing text, but it does not affect non-text content like images directly. Additionally, only certain CSS properties are supported inside ::selection, including color, background-color, text-shadow, and some font-related properties. Other properties, such as margins or borders, will not apply. The pseudo-class can also be combined with other selectors to target specific elements, like headings, paragraphs, or span elements.

Here’s a simple example illustrating its use:

<p>This is a <span>highlightable</span> text.</p>

p::selection {
  background-color: #ffcc00;
  color: #000000;
}

span::selection {
  background-color: #00ccff;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

In this example, when the user selects text inside a paragraph, it will appear with a yellow background and black text. If the selected text is inside a , it will have a blue background with white text and a subtle shadow. This allows for nuanced control over text selection styles, enhancing both readability and visual appeal.

The ::selection pseudo-element is particularly useful in web applications, blogs, or any content-rich sites where user interaction with text is common, providing a subtle but effective way to reinforce a site's visual identity.