CSS ::selection Pseudo-element
Applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.
Example: This example uses ::selected selector to style the selected text in the elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>selection Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
text-align: center;
}
p::selection {
color: red;
background-color: green;
font-size: 30px;
}
::selection {
color: green;
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::selection element</h2>
<p>
Content in this paragraph turns
red with green background on selection.
</p>
<span>
As this is not a paragraph, you can
notice red background and green text on
selection.
</span>
</body>
</html>
Output:
CSS Pseudo Elements
CSS Pseudo Elements lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element, and Inserting content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.
Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax:
selector::pseudo-element {
property: value;
}
There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
Table of Content
- ::first-line Pseudo-element
- ::first-letter Pseudo-element
- ::before Pseudo-element
- ::after Pseudo-element
- ::marker Pseudo-element
- ::selection Pseudo-element
Contact Us