How to use css ::selection

Wed-Jan-2023
1

The ::selection pseudo-element in CSS allows you to apply styles to the portion of an element that is selected by the user. This can be used to create custom highlighting and text selection effects on your web page.

Here’s how to use ::selection:

css
/* Apply styles to selected text */
::selection {
background-color: yellow;
color: black;
}

/* Apply styles to selected links */
::selection a {
color: white;
text-decoration: underline;
}

/* Apply styles to selected images */
::selection img {
opacity: 0.5;
border: 2px solid blue;
}

In the above example, the ::selection pseudo-element is used to apply styles to the selected text, links, and images. The background-color and color properties are used to set the background and text colors of the selected text. The text-decoration property is used to underline the selected links. The opacity property is used to reduce the opacity of the selected images, and the border property is used to add a blue border around the selected images.

Note that the ::selection pseudo-element is not supported in all browsers, and its appearance can be affected by the user’s system settings. Also, some properties like padding and margin cannot be applied to ::selection. In addition, in some browsers like Firefox, the ::selection pseudo-element can only be used to apply styles to the text and not to the entire element.

Overall, the ::selection pseudo-element is a useful tool for creating custom highlighting and text selection effects on your web page.