Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to select elements by data attribute using CSS?
CSS (Cascading Style Sheets) 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.
Syntax
[data-attribute] {
/* Styles for elements that have the data attribute */
}
[data-attribute="value"] {
/* Styles for elements with specific data attribute value */
}
What are Data Attributes?
Data attributes are HTML attributes that provide additional information about an element. These attributes begin with the word "data-" followed by a descriptive name. They store information that is not visible to the user but can be accessed by scripts or CSS.
<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>
Example: Selecting by Exact Value
The following example applies a red background color to products with a rating of 6
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
li {
font-size: 20px;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
li[data-rating="6"] {
background-color: #ffcccc;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>Selecting Elements by Data Attribute</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>
A centered heading "Selecting Elements by Data Attribute" appears above a list where "Product One" and "Product Four" have light red backgrounds with red borders, while other products appear normal.
Example: Interactive Tabs with Hover Effects
The following example demonstrates selecting elements by data attributes with hover effects
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
[data-my-data] {
border: 1px solid #333;
padding: 15px;
cursor: pointer;
margin: 10px auto;
border-radius: 8px;
transition: all 0.3s ease;
}
[data-my-data]:hover {
background-color: #ff4444;
color: white;
transform: scale(1.05);
}
[data-my-data="d-tab"] {
background-color: #e6f3ff;
color: #333;
width: 250px;
}
</style>
</head>
<body>
<h3>Hover over the tabs 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>
Three light blue tab-like divs appear centered on the page. When hovering over any tab, it turns red with white text and scales up slightly with a smooth transition effect.
Conclusion
Data attributes combined with CSS attribute selectors provide a powerful way to create dynamic styling based on custom data. This approach enables clean separation between content and presentation while maintaining flexible and maintainable code.
3K+ Views
