Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change the Color of Selected Text Using CSS
To change the color of selected text using CSS, is a simple task which can be achieved using ::selection psuedo element.
In this article, we are having text content which are written using various HTML tags, our task is to change the color of selected text using CSS.
Changing color of selected text using CSS
- In example 1, we are having a div element, an H3 element and a p element with some text written in it.
- We have used "::selection" pseudo-element selector which changes the background-color and text color of any selected text in HTML document.
- In example 2, we are having a div, section and article element with some text.
- Then we have used specific elements to change the color and background-color on selection. For example, "div::selection" changes the style of selected text of div element similarly, "section::selection" and "article::selection" changes style of selected text of section and article tag respectively.
Example 1
Here is the complete example code implementing above mentioned steps to change the color of selected text using CSS.
<html>
<head>
<title>
To change the color of selected text using CSS
</title>
<style>
::selection {
color: white;
background-color: #04af2f;
}
</style>
</head>
<body>
<h3>
Changing the Color of Selected Text Using CSS
</h3>
<p>
In this example we have used <strong>::selection
</strong>psuedo element on div to change the
color of selected text using CSS.
</p>
<div>
Select any text to change it's background and
text color.
</div>
</body>
</html>
Example 2
Here is the complete example code implementing above mentioned steps to change the color of selected text using CSS.
<html>
<head>
<title>
To change the color of selected text using CSS
</title>
<style>
div::selection {
color: white;
background-color: #04af2f;
}
section::selection {
color: white;
background-color: #16031f;
}
article::selection {
color: rgb(243, 91, 49);
background-color: #eeb1fa;
}
</style>
</head>
<body>
<h3>
Changing the Color of Selected Text Using CSS
</h3>
<p>
In this example we have used <strong>::selection
</strong>psuedo element on div, section and article
tags to change the color of selected text using CSS.
</p>
<div>
Select this div element to change the background
color and text color.
</div>
<section>
Select this section element to change the background
color and text color.
</section>
<article>
Select this article element to change the background
color and text color.
</article>
</body>
</html>
Conclusion
To change 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.
6K+ Views
