The ::selection pseudo-element is a highlighted part of the document. It is used to apply styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
The default text selection background color is blue, and this property is used to change the default color.
Only a few CSS properties can be used to style the ::selection pseudo-element:
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline and its longhands
- text-decoration and its associated properties
- text-emphasis-color
This pseudo-element was introduced in the CSS Selectors Level 3 but was removed and, currently, it is in Pseudo-Elements Level 4.
Version
CSS Pseudo-Elements Level 4
Syntax
::selection {
css declarations;
}Example of the ::selection pseudo-element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
::-moz-selection {
color: #eee;
background: #8ebf42;
}
::selection {
color: #eee;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>