Help How To Change Selected Text Color and Background with CSS

Help How To Change Selected Text Color and Background with CSS
September 05, 2022

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

    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.


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.

Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates