::selection CSS Pseudo Element

Description

The ::selection pseudo-element in CSS is used to apply styles to the portion of text that a user selects on a web page. It allows web developers to customize the appearance of the text when it is highlighted by clicking and dragging the mouse cursor over it.

You can use ::selection to change properties like the background color, text color, and other visual attributes of the selected text. This provides a way to enhance the user experience by making the selected text more visually appealing or better aligned with the overall design of a website.

Here's a simple example of how to use the ::selection pseudo-element in CSS:

::selection {

  background-color: #007bff; /* Blue background color for selected text */

  color: #ffffff; /* White text color for selected text */

}

In this example, when a user selects text on the webpage, it will have a blue background with white text color. You can customize these styles to match your website's design preferences. It's worth noting that browser support for ::selection may vary, so it's a good idea to check compatibility when using this pseudo-element.

Syntax

::selection {
  /* ... */
}

Example

HTML

<p class="select">Select this text with your mouse to view the effect of the ::selection pseudo-element.</p>

<p>Now select this text to see how it would normally look.</p>

CSS

p.select::selection { 

   color: #ff0;

   background: #000;

}

Result

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.