Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the color of selected text using CSS?
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.
4K+ Views
