CSS ::selection Selector

Last Updated : 30 Sep, 2024

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.

html

<!DOCTYPE html> <html> <head> <title>::selection Selector</title> <style>  h1 {  color: green;  }  body {  text-align: center;  }  /* CSS property for Firefox */  ::-moz-selection {  color: white;  background: green;  }  ::selection {  color: white;  background: green;  }  </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>::selection selector</h2> <p>A Computer Science portal for geeks </p> </body> </html>