CSS ::selection Pseudo-element

Imagine you’re reading a digital document, and when you highlight text, it changes to your favorite color, making it more engaging and personalized. In web design, the ::selection pseudo-element in CSS allows you to customize the appearance of selected text, enhancing the user experience and adding a unique touch to your website.

Table of Contents

What is the ::selection Pseudo-element?

The ::selection pseudo-element allows you to define the style of the portion of a document that a user has highlighted or selected. This can include changing the background color, text color, and other properties to make selected text stand out in a visually appealing way.

Here’s how it looks:

::selection {
  property: value;
}

Why Use the ::selection Pseudo-element?

Enhanced User Experience: The ::selection pseudo-element allows you to create a more engaging and personalized user experience by styling the text that users highlight.

Visual Consistency: It helps maintain visual consistency across your website by ensuring that text selection aligns with your overall design and color scheme.

Simplified Code: Using the ::selection pseudo-element is straightforward and doesn’t require additional HTML elements, keeping your code clean and maintainable.

Practical Examples

Let’s explore some practical examples to see how the ::selection pseudo-element can be used effectively.

Example 1: Changing the Background Color of Selected Text

You can use the ::selection pseudo-element to change the background color of highlighted text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selection Background Color</title>
	
    <style>
	
        ::selection {
            background-color: yellow;
        }
		
    </style>
</head>
<body>

    <p>
        Highlight this text to see the background color change.
    </p>
	
</body>
</html>

In this example, the ::selection pseudo-element changes the background color of selected text to yellow, making it stand out.

Example 2: Changing the Text Color of Selected Text

You can also change the text color of highlighted text using the ::selection pseudo-element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selection Text Color</title>
	
    <style>
	
        ::selection {
            color: white;
            background-color: blue;
        }
		
    </style>
</head>
<body>

    <p>
        Highlight this text to see the text and background color change.
    </p>
	
</body>
</html>

Here, the ::selection pseudo-element changes the text color to white and the background color to blue when the text is selected, enhancing readability and visual appeal.

Example 3: Applying Selection Styles to Specific Elements

You can apply different selection styles to specific elements for more targeted customization.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Specific Element Selection Style</title>
	
    <style>
	
        p::selection {
            background-color: pink;
            color: darkred;
        }
		
        h1::selection {
            background-color: lightblue;
            color: navy;
        }
		
    </style>
	
</head>
<body>

    <h1>Highlight the Heading</h1>
	
    <p>
        Highlight this paragraph to see a different selection style.
    </p>
	
</body>
</html>

Here, different selection styles are applied to paragraphs and headings. Highlighting the heading changes its background to light blue and text to navy, while highlighting the paragraph changes its background to pink and text to dark red.

Example 4: Adding a Text Shadow to Selected Text

You can add a text shadow to highlighted text for an additional effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selection Text Shadow</title>
	
    <style>
	
        ::selection {
            background-color: orange;
            color: black;
            text-shadow: 2px 2px 2px gray;
        }
    </style>
</head>
<body>

    <p>
        Highlight this text to see a text shadow effect.
    </p>
	
</body>
</html>

In this example, the ::selection pseudo-element adds a text shadow to highlighted text, making it pop even more with an orange background and black text.

Conclusion

The ::selection pseudo-element is a versatile and powerful tool in CSS, allowing you to customize the appearance of selected text. Whether you’re changing background colors, text colors, adding text shadows, or applying different styles to specific elements, the ::selection pseudo-element helps you enhance your web design with dynamic and engaging content. So, the next time you want to add a unique touch to highlighted text, remember the ::selection pseudo-element — your key to creative and effective styling.