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
Selected Reading
Using Data-Attributes (data-*) in CSS
CSS data attributes allow you to store custom information on HTML elements and access it through CSS selectors and the attr() function. These attributes must start with data- followed by a custom name.
Syntax
/* Selecting elements with specific data attributes */
[data-attribute] { /* styles */ }
[data-attribute="value"] { /* styles */ }
/* Using data attribute values in CSS */
element::before {
content: attr(data-attribute);
}
Example 1: Interactive Food Menu with Data Attributes
This example demonstrates how data attributes can store additional information and interact with JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
dl {
margin: 2%;
font-family: Arial, sans-serif;
}
dt {
font-weight: bold;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
margin-bottom: 5px;
cursor: pointer;
}
dt:hover {
background-color: #e0e0e0;
}
dd {
font-style: italic;
margin-left: 20px;
margin-bottom: 15px;
}
.info {
width: 60%;
background-color: #4CAF50;
padding: 15px;
color: white;
text-align: center;
border-radius: 5px;
margin-top: 20px;
}
</style>
</head>
<body>
<dl>
<dt onmouseover="showDescription(this)" data-food-type="beverages">Tea</dt>
<dd>Hot Spicy Tea or Ice Lemon Tea</dd>
<dt onmouseover="showDescription(this)" data-food-type="snacks">Toast</dt>
<dd>Hot Garlic Butter Toast</dd>
</dl>
<div class="info">Hover over food items to see category info</div>
<script>
function showDescription(food) {
let foodType = food.getAttribute("data-food-type");
document.querySelector('.info').textContent = "We have " + food.innerHTML + " in " + foodType + " category.";
}
</script>
</body>
</html>
A food menu with "Tea" and "Toast" items appears. When you hover over each item, the green info box below shows the category information stored in the data-food-type attribute.
Example 2: CSS Content Generation with Data Attributes
This example shows how to use data attributes with CSS attr() function to generate content −
<!DOCTYPE html>
<html>
<head>
<style>
.user-card {
margin: 20px auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 300px;
padding: 20px;
border-radius: 10px;
background-color: #f9f9f9;
text-align: center;
}
.user-card[data-status='premium'] {
border: 2px solid gold;
background-color: #fff9e6;
}
.user-card::before {
content: "User: " attr(data-username);
display: block;
font-size: 1.3em;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.user-card::after {
content: "ID: " attr(data-user-id);
display: block;
font-size: 0.9em;
color: #666;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="user-card" data-username="Alice Johnson" data-user-id="12345" data-status="premium">
<p>Premium Member</p>
</div>
<div class="user-card" data-username="Bob Smith" data-user-id="67890" data-status="regular">
<p>Regular Member</p>
</div>
</body>
</html>
Two user cards appear. The first card (Alice) has a gold border for premium status, with "User: Alice Johnson" at the top and "ID: 12345" at the bottom. The second card (Bob) shows regular styling with "User: Bob Smith" and "ID: 67890".
Key Benefits
- Semantic HTML − Store meaningful data without affecting layout
-
CSS Integration − Access data directly in CSS using
attr() -
JavaScript Compatibility − Easy access via
getAttribute() - Clean Markup − No need for additional classes or IDs
Conclusion
Data attributes provide a clean way to store custom information in HTML elements. They integrate seamlessly with CSS for styling and content generation, while remaining accessible to JavaScript for dynamic interactions.
Updated on: 2026-03-15T15:27:54+05:30
1K+ Views
Advertisements