CSS ::selection Selector

The ::selection CSS pseudo-element allows you to style the part of a webpage that users highlight, such as when they drag the mouse over text. It’s a simple way for developers to customize the appearance of selected text, improving the overall user experience. However, only a few CSS properties can be used with :: selection, including color, background, cursor, and outline.

What is ::selection Selector?

The ::selection pseudo-element applies specific styles to the portion of a webpage that the user selects. This is particularly useful for enhancing the readability and visual appeal of highlighted text.

Syntax

::selection {
 // CSS Property
}

Example of CSS ::selection Selector

Example: In this example, we demonstrate how the ::selection pseudo-element is used to change the text color to white and the green background when the user highlights any text on the page.

Output:

👁 selection

Supported Browsers

The ::selection selector is supported by the following browsers:

• Apple Safari 1.1 and above
• Google Chrome 1.0 and above
• Edge 12.0 and above
• Firefox 62.0 and above
• Opera 9.5 and above

Note: For older versions of Firefox, use the ::-moz-selection selector to ensure proper functionality.