CSS Data Attribute Conditional Selectors

In this article, we’ll introduce data attribute conditional selectors in CSS. Data attributes are a type of HTML attribute introduced in HTML5 that can be used to store custom information in HTML elements. These data attributes can be selected and manipulated using CSS selectors.

Read more: CSS Tutorial

What are data-attribute conditional selectors?

Data-attribute conditional selectors are a type of CSS selector used to select elements with specific data-attribute values. They can be implemented as a form of attribute selector. Data-attribute conditional selectors allow us to apply styles or select specific elements based on the value of their data-attribute.

Below is the syntax for a data attribute conditional value selector:

[attribute name="attribute value"] {
/* Style rule */
}

In the above code, attribute name represents the name of the data attribute to be selected, and attribute value represents the data attribute value to be matched. When the attribute value matches, the style rule will be applied to the corresponding element.

How to Use Data Attribute Conditional Value Selectors?

To demonstrate the use of data attribute conditional value selectors, let’s consider a simple example. Suppose we have an HTML document like this:

<ul>
<li data-category="fruit">apple</li>
<li data-category="vegetable">carrot</li>
<li data-category="fruit">banana</li>
<li data-category="vegetable">broccoli</li>
<li data-category="fruit">peach</li>
</ul>

In the example above, the <li> elements have the data-category data attribute with the values ​​”fruit” and “vegetable” respectively. Now, let’s use the data attribute conditional selector to select specific elements.

First, let’s select the elements with data-category="fruit" and set their color to red:

li[data-category="fruit"] {
color: red; 
} 

Next, let’s select the elements with data-category="vegetable" and set their color to green:

li[data-category="vegetable"] {
color: green;
}

Using the above CSS code, we can select elements with specific attribute values ​​based on their data attributes and apply different styles to them.

Application Examples of Data Attribute Conditional Value Selectors

Data attribute conditional value selectors have a wide range of application scenarios. Here are some common examples:

1. Filter effects: By setting a data attribute on an element and applying different styles based on the value of the data attribute, we can implement filter effects for lists, menus, or image galleries.

<ul> 
<li data-filter="all">All</li> 
<li data-filter="fruit">Fruit</li> 
<li data-filter="vegetable">Vegetable</li> 
</ul> 

li[data-filter="all"] { 
/* Show all items */ 
} 
li[data-filter="fruit"] { 
/* Show only fruit items */ 
} 
li[data-filter="vegetable"] { 
/* Show only vegetable items */ 
} 

2. Theme switching: By setting data attributes on HTML elements and applying different theme styles based on different data attribute values, we can achieve website or application theme switching.

<div data-theme="light"> 
<!-- Content --> 
</div> 
<div data-theme="dark"> 
<!-- Content --> 
</div> 

div[data-theme="light"] { 
/* Light theme style */ 
} 
div[data-theme="dark"] { 
/* Dark theme style */ 
} 

3. Form Validation Tips: By setting data attributes on form fields and showing or hiding validation tips based on different data attribute values, we can enhance the user experience.

<input type="text" data-validation="required" placeholder="Please enter your name" /> 
<input type="email" data-validation="email" placeholder="Please enter your email" /> 

input[data-validation="required"]:invalid { 
/* Display validation hint for required fields */ 
} 
input[data-validation="email"]:invalid { 
/* Display validation hint for incorrect email format */ 
} 

Through the above examples, we can see the flexibility and power of data attribute conditional value selectors in implementing various applications.

Summary

In this article, we introduced data attribute conditional selectors in CSS. Data attributes are a type of HTML attribute introduced in HTML5 that are used to store custom information within HTML elements. Data attribute conditional selectors select and manipulate specific elements by matching the value of the data attribute. They can be used to implement various applications, such as filter effects, theme switching, and form validation prompts. By mastering data attribute conditional selectors, we can more flexibly select and manipulate elements in CSS and achieve a variety of customized styling effects.