::selection
::selection styles the highlighted text when a user selects it with their cursor. Only color, background-color, and text-shadow are supported.
CSS
Beginner
3 min read
::selection Pseudo-Element
Example
/* Custom selection color */
::selection {
background-color: #007bff;
color: white;
}
/* Per-element selection */
.code-block::selection {
background-color: #0d6efd;
color: #fff;
}
/* Subtle yellow highlight */
article::selection {
background-color: #fff176;
color: #333;
} Pro Tip
Use a selection color that contrasts well with the text — poor contrast makes selected text hard to read.