How to change the color of selected text using CSS?

CSS Web Development Front End Technology

Styling text on a website is a crucial aspect of web design and development. For doing this, CSS (Cascading Style Sheets) is a powerful tool to have at your disposal. CSS is a versatile tool that allows to manipulate the appearance of text in various ways. One of the most sought-after techniques is the alteration of the color of selected text. In this article we will learn two techniques to change the color of the selected text using CSS.

::selection pseudo-element

The ::selection pseudo-element is a powerful feature that enables us to select and style text that is currently being highlighted by the user. To change the color of the selected text, we use the color property. For instance, if we want to make the selected text appear in a maroon, we will use the following CSS −

::selection {
   color: red;
}

This will change the color of the selected text to red for the entire web page.

Example

Here is an example to change the color of selected text to red and background color to black.

<html >
<head>
   <title>Change the color of selected text using CSS?</title>
   <style>
      ::selection {
         color: red;
         background-color:black;
      }
   </style>
</head>
<body>
   <h2>Changing the color of selected text using CSS</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.
   It has survived not only five centuries, but also the leap into electronic typesetting</p>
</body>
</html>

By using Specific elements or classes

We can change the color and background color of selected text on specific elements or classes. For example, we can change the color of selected text within a specific "h1" tag by using the following CSS −

h1::selection {
   background: red;
   color: white;
}

This will change the color of selected text within the h1 element to white, and the background color of selected text to red.

Example

Here is an example to change the color of selected <h1> text to white and background color to red, <h2> text to red, background to yellow and <p> text blue and background to pink.

<html>
   <title>Change the color of selected text using CSS</title>
   <style>
      h1::selection {
         background: red;
         color: white;
      }
      h2::selection {
         background: yellow;
         color: red;
      }
      p::selection {
         background: pink;
         color: blue;
      }
   </style>
</head>
<body>
   <h1>Welcome to tutorialsPoint</h1>
   <h2>Change the color of selected text using CSS</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. It has survived 
   not only five centuries, but also the leap into electronic typesetting</p>
</body>
</html>

Conclusion

Changing the color of selected text using CSS is a straightforward task that can be accomplished by utilizing the ::selection pseudo-element. By using the color and background-color properties, we can alter the appearance of selected text on website. Furthermore, we can use the ::selection pseudo-element on specific elements or classes for more precise control over the styling of selected text.