::selection CSS Pseudo Element


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.


::selection {
  /* ... */


<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>
p.select::selection { 
color: #ff0;
background: #000;


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.

Browser Support

The following table will show you the current browser support for the CSS ::selection pseudo element.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023