CSS ::selection Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The ::selection selector in CSS is used to define the styles for the portion of a document that a user has highlighted or selected.

This allows you to customize the appearance of text when it is selected by the user, rather than sticking to the default selection styling provided by the browser.

💡 Syntax

The signature of the ::selection Selector is as follows:

Syntax

Copied

::selection {
    /* CSS properties */
}

The ::selection pseudo-element can be used with various text properties like color, background-color, and text-shadow.

Supported Properties:

color
background-color
text-shadow

Note: Only a limited set of CSS properties can be applied to the ::selection pseudo-element.

📝 Example

Below is an example demonstrating how to use the ::selection selector to style text when it is highlighted by the user.

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS ::selection Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>
        Highlight this text to see the custom selection styling applied by the `::selection` selector.
    </p>
</body>
</html>

🎨 CSS

CSS

Copied

/* Styling for selected text */
::selection {
    background-color: yellow;
    color: black;
}

In this example:

When you highlight text in the paragraph, the selection will have a yellow background and black text color.

💬 Usage Tips

Use contrasting colors for the background and text when styling with ::selection. This ensures readability when text is highlighted.
::selection can only be applied to block-level elements like paragraphs, headings, or lists. However, when the user highlights the text, the styling will only apply to the selected portion.
Keep in mind that not all CSS properties are supported in ::selection. You can use color, background-color, and text-shadow, but properties like font-size or border are not allowed.

⚠️ Common Pitfalls

Limited Browser Support for All Properties: While ::selection is widely supported, not all browsers may support advanced properties like text-shadow. Stick to basic styles like color and background-color for cross-browser consistency.
No Effect on Non-Selectable Text: The ::selection selector will have no effect on elements where text cannot be selected, such as images or elements with user-select: none.

🎉 Conclusion

The ::selection selector offers a simple way to improve the user experience by customizing the appearance of selected text. It provides a unique opportunity to align the look of selected text with your site's design, making for a more cohesive and polished visual experience. Use it carefully and keep browser compatibility in mind to ensure your custom selection styles work smoothly across different environments.