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 select elements by data attribute using CSS?
CSS (Cascading Style Sheets) is an essential tool for web developers to enhance the visual looks of the web pages. With CSS, we can customize the layout, color scheme, and typography of the website. CSS provides multiple ways to target and style specific HTML elements based on their attributes. One of the most useful and powerful methods to select elements is by using data attributes.
What are data attributes?
Data attributes are HTML attributes that provide additional information about an element, that information is not visible to the user but can be accessed by scripts or CSS. These attributes begin with the word "data-" followed by a descriptive name. Data attributes can be used to store information that is not visible to the user but can be accessed by scripts or CSS.
For example, suppose we have a list of products, and we want to apply different styles to products with different ratings. We can use a data attribute to store the rating value and target it with CSS.
How to use data attributes in HTML?
To use data attributes in HTML, we need to add the "data-" prefix to the attribute name. Here is an example −
<ul> <li data-rating="6">Product One</li> <li data-rating="9">Product Two</li> <li data-rating="7">Product Three</li> <li data-rating="6">Product Four</li> </ul>
In the above example, we have added a data-rating attribute to each list item that stores the rating value of each product. This data can be accessed and manipulated using CSS.
How to select elements by data attribute using CSS?
To select elements by data attribute using CSS, we use the attribute selector. The attribute selector allows us to target elements based on their attribute value.
Syntax
[attribute="value"] {
/*css code */
}
In the above syntax, "attribute" refers to the data attribute that we want to target, and "value" refers to the value of the data attribute. For example, If we want to apply a different background color to products with a rating of 6. For doing this we will use the following CSS code −
li[data-rating="6"] {
background-color: red;
}
In the above code, we are using the attribute selector to target list items with a data-rating attribute value of 6 and applying a red background color to them.
Example 1
Here is an example to select elements by data attribute using CSS.
<DOCTYPE html>
<html>
<head>
<style>
h2{
text-align: center;
}
li {
font-size: 20px;
}
li[data-rating="6"] {
background-color: red;
}
</style>
</head>
<body>
<h2>Selecting elements by data attribute using CSS </h2>
<ul>
<li data-rating="6">Product One</li>
<li data-rating="9">Product Two</li>
<li data-rating="7">Product Three</li>
<li data-rating="6">Product Four</li>
</ul>
</body>
</html>
Example 2
Here is another example to select elements by data attribute using CSS. In this example, we are using the data-my-data attribute to store information about tabs. The first CSS rule selects all elements that have a data-my-data attribute and applies some basic styling to them. The second rule selects only elements with a data-my-data attribute and applies a hover style to them. The third rule selects only elements with a data-my-data attribute and applies the CSS style.
<!DOCTYPE html>
<html>
<head>
<style>
body{ text-align:center;}
[data-my-data] {
border: 1px solid black;
padding: 10px;
cursor: pointer;
}
[data-my-data]:hover {
background-color: red;
color: white;
}
[data-my-data="d-tab"] {
background-color: lightblue;
color: black;
width:250px;
margin:auto;
}
</style>
</head>
<body>
<h3>Hover over the below DIVs to see the changes</h3>
<div data-my-data="d-tab">First Tab Data</div>
<div data-my-data="d-tab">Second Tab Data</div>
<div data-my-data="d-tab">Third Tab Data</div>
</body>
</html>
Conclusion
By storing additional data in HTML and targeting it with CSS, we can create interactive and dynamic web pages that are tailored to the specific needs. Using data attributes in HTML and selecting elements by data attribute using CSS can be a powerful way to customize the appearance of the web pages.
2K+ Views
