The ::selection pseudo-element in CSS is used to style the portion of a document that has been highlighted by the user, for instance, by clicking and dragging the mouse over text. It provides a way to customize the appearance of selected text, enhancing user experience.
Example 1: Basic ::selection Styling
/* Style for the highlighted text within a paragraph */
p::selection {
color: white; /* Sets the text color of the selection to white */
background-color: #ff5733; /* Sets the background color of the selection to a shade of orange */
}
Explanation
This code targets any text selected by the user within a <p> tag. It changes the default selection colors to a white text color and an orange background, making the selection more visually distinct.
Example 2: Styling ::selection with text-shadow
/* Applying text-shadow to selected text */
::selection {
color: #ffffff; /* White text color for the selection */
background-color: #c70039; /* Deep red background for the selection */
text-shadow: 2px 2px 4px #000000; /* Adds a black shadow to the selected text */
}
Explanation
This example demonstrates how to apply a text-shadow to selected text sitewide. The selected text will appear white with a deep red background and a subtle black shadow, adding depth to the highlighted content.
Example 3: Different ::selection Styles for Different Elements
/* Custom selection style for h1 elements */
h1::selection {
color: #f9f9f9; /* Light gray text color */
background-color: #333; /* Dark gray background */
}
/* Custom selection style for blockquotes */
blockquote::selection {
color: #333; /* Dark gray text color */
background-color: #f9f9f9; /* Light gray background */
}
Explanation
This CSS snippet shows how you can define different selection styles for various elements. Here, <h1> elements and <blockquote> elements will have contrasting selection colors, improving the visual hierarchy of selected content.
Example 4: Using RGBA for Semi-Transparent ::selection
/* Semi-transparent selection background */
div::selection {
background-color: rgba(255, 193, 7, 0.5); /* A semi-transparent yellow background */
color: black; /* Black text color */
}
Explanation
In this example, rgba() is used to create a semi-transparent background for the selected text within <div> elements. This allows the original background to be partially visible through the selection, creating a layered effect.
Example 5: No Text Color Change in ::selection
/* Changing only the background color of the selection */
::selection {
background: #d4edda; /* A light green background for the selection */
}
Explanation
This code snippet illustrates how you can modify only the background color of the text selection, while keeping the original text color intact. This provides a more subtle highlighting effect.
Example 6: High Contrast ::selection for Accessibility
/* High contrast selection for better readability */
::selection {
color: #000000; /* Black text color */
background-color: #ffff00; /* Bright yellow background */
}
Explanation
This example focuses on accessibility by using a high-contrast color combination for the text selection. The bright yellow background with black text ensures that the selected content is easily readable for users with visual impairments.
Example 7: Gradient Background for ::selection (Limited Support)
/* Styling selection with a linear gradient background */
::selection {
color: white; /* White text color */
background: linear-gradient(to right, #6a11cb, #2575fc); /* A purple to blue gradient */
}
Explanation
This code demonstrates an advanced styling technique using a linear gradient as the background for the selected text. Browser support for this can be limited, but it creates a modern and visually appealing effect where supported.