Gegevensattribuutwaarden (data attribute values) in HTML kunnen handig zijn voor het opslaan van extra informatie die geen visueel effect heeft. Maar wist je dat je deze gegevens ook kunt gebruiken in je CSS?
Stel dat je een data-attribuut in je HTML hebt zoals dit:
```
Je kunt dit data-attribuut vervolgens in je CSS selecteren en er stijlen aan toekennen:
```
div[data-status=“premium”] {
background: gold;
}
```
In bovenstaand voorbeeld krijgen alle div-elementen met het data-status attribuut van “premium” een gouden achtergrondkleur.
Hier is een ander voorbeeld: Stel dat je een data-attribuut in je HTML hebt zoals dit:
```
Hover over mij
```
Je kunt het volgende doen om een eenvoudige tooltip te maken met behulp van pseudo-elementen:
```
span[data-tooltip]:hover:after {
content: attr(data-tooltip);
position: absolute;
background: black;
color: white;
padding: 5px;
}
```
In dit voorbeeld wordt de tooltip tekst uit het data-tooltip attribuut gehaald met behulp van de CSS-functie “attr()” en als inhoud gebruikt voor een pseudo-element dat wordt weergegeven wanneer je over de ``-tag hovert.
Op deze manier kun je data attributen op verschillende manieren gebruiken om je documenten dynamischer en interactiever te maken zonder gebruik te maken van JavaScript.
