::selection CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

Editor

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.