If you're looking for a way to change the selected text's color and background, surprisingly few options allow that.

However, with CSS pseudo-elements, you can actually accomplish this incredibly easily!

What is a CSS pseudo-element?

In CSS, a pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

For example, the::first-line pseudo-element applies styles to the first line of the element.

Pseudo-elements are always used in conjunction with other selectors and are written after the selector with which they will be used. For example, p::first-line would apply styles to the first line of every paragraph on the page.

Changing Selected Text Color and Background Using CSS

::selection{
    color:white;
    background-color: crimson;
}

The ::selection CSS pseudo-element applies styling to the portion of a document that has been selected by the user. To manipulate the color of selected text, you can use the ::selection pseudo-element and the color property.

Output:

With CSS, you can change the color of the selected text and its background. This is useful for making the text more readable or for highlighting important information.

To do this, you'll need to use the::selection pseudo-element. With::selection, you can set the color of the text and its background independently.

You can also use it to set other properties, such as the font size or font weight. Give it a try and see how easy it is to change the appearance of a selected text with CSS.

Front-End Developer Interview Kit

Today, Start Preparing for your Dream Job!