CSS ::selection property
The ::selection pseudo-element in CSS is used to style the portion of a document that the user has highlighted or selected. This pseudo-element allows you to customize the appearance of the text selection, which can enhance the user experience by providing visual feedback or aligning the selection style with the overall design of your website.
Syntax
selector::selection {
/* styles */
}
selector: The element to which you want to apply the styling. Typically,::selectionis used without a specific selector since it affects the entire document.::selection: The pseudo-element that targets the selected portion of the text.
Supported Properties
The ::selection pseudo-element supports a limited set of CSS properties. The most commonly used properties are:
color: Sets the text color of the selected text.background-color: Sets the background color of the selected text.
Other properties like border, font-size, and text-transform are not supported on ::selection.
Examples
Basic Usage
::selection {
background-color: yellow;
color: black;
}
- In this example, the selected text across the entire document will have a yellow background and black text color.
Applying to Specific Elements
You can also apply ::selection to specific elements to target text selection within those elements.
p::selection {
background-color: lightblue;
color: navy;
}
- In this example, only the selected text within
<p>elements will have a light blue background and navy text color.
Examples
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selection Pseudo-element Example</title>
<style>
::selection {
background-color: lightgray;
color: darkblue;
}
p::selection {
background-color: lightyellow;
color: darkgreen;
}
h1::selection {
background-color: pink;
color: black;
}
</style>
</head>
<body>
<p>This is a paragraph. Try selecting this text to see the selection styles applied to paragraphs.</p>
<h1>This is a heading. Selecting this text will apply heading-specific selection styles.</h1>
</body>
</html>
Explanation:
::selection:- Applies a light gray background and dark blue text color to the selected text across the entire document.
p::selection:- Applies a light yellow background and dark green text color to the selected text within
<p>elements.
- Applies a light yellow background and dark green text color to the selected text within
h1::selection:- Applies a pink background and black text color to the selected text within
<h1>elements.
- Applies a pink background and black text color to the selected text within
Important Points
Limited Support:
- The
::selectionpseudo-element has limited support for CSS properties. You can only usecolorandbackground-colorfor styling selections.
- The
User Experience:
- Customizing the selection style can improve user experience by making selections more visually appealing or consistent with your site’s design.
Browser Compatibility:
- Most modern browsers support
::selection, but it's always good practice to test across different browsers to ensure consistent behavior.
- Most modern browsers support
No Effect on Non-Text Elements:
- The
::selectionpseudo-element only affects text selections and does not apply to non-textual elements like images or form controls.
- The