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>