Data attributes allow you to store extra information on standard HTML elements. These values can be used in CSS to style elements based on those attribute values.
Here’s a basic example of how to use data attribute values in CSS:
HTML:
```
CSS:
```
div[data-type=“primary”] {
color: blue;
}
div[data-type=“secondary”] {
color: red;
}
```
The CSS rules are selecting the div elements based on their data-type attribute and changing the color of the text accordingly.
You can also use attribute selectors with other elements, not just div elements, and you can base your styles on any data attribute, not just data-type.
