IN DEZE HANDLEIDING:
Elementen selecteren in css met attribute data value
Er zijn veel manieren waarop je elementen kunt selecteren in CSS. De meest elementaire selectie is op tagnaam, zoals p { }. Bijna alles wat specifieker is dan een tag-selector gebruikt attributen – class en ID selecteren beide op die attributen op HTML-elementen. Maar klasse en ID zijn niet de enige attributen die ontwikkelaars kunnen selecteren. We kunnen alle attributen van een element gebruiken als selector.
Attribuutselectie heeft een speciale syntaxis. Hier is een voorbeeld:
a[href=”https://cursuswp.com”] {
color: #dd0000;
}
Dat is een exact match selector die alleen links selecteert met de exacte href attribuut waarde van “https://css-tricks.com”.
7 verschillende types
Attribuut selectors zijn standaard hoofdlettergevoelig (zie hoofdletterongevoelig matchen hieronder), en worden geschreven binnen haakjes [ en ].
Er zijn zeven verschillende soorten overeenkomsten die je kunt vinden met een attribuut-selector, en de syntaxis is voor elk verschillend. Elk van de meer complexe attribuut selectors bouwt voort op de syntaxis van de exacte match selector.
Ze beginnen allemaal met de attribuutnaam en eindigen met een gelijkteken gevolgd door de attribuutwaarde(n), meestal tussen aanhalingstekens. Wat er tussen de attribuutnaam en het gelijkheidsteken staat, maakt het verschil tussen de selectors.
[data-waarde]
{
/* Attribuut bestaat */
}
[data-value="foo"]
{ {
/* Attribuut heeft deze exacte waarde */
}
[data-value*="foo"]
{ /* Attribuut heeft deze exacte waarde */ }.
/* Attribuut waarde bevat deze waarde ergens in */
}
[data-value~="foo"]
{ /* Attribuutwaarde bevat deze waarde ergens in */ }.
/* Attribuut heeft deze waarde ergens in een door spaties gescheiden lijst */
}
[data-value^="foo"]
{ /* Attribuut heeft deze waarde ergens in een door spaties gescheiden lijst */ } }.
/* Attribuutwaarde begint hiermee */
}
[data-value|="foo"]
{ /* Attribuutwaarde begint hiermee */ }.
/* Attribuutwaarde begint hiermee in een door streepjes gescheiden lijst */
}
[data-value$="foo"]
{ /* Attribuutwaarde eindigt met dit */ }.
/* Attribuutwaarde eindigt hiermee */
}
Waarde bevat:
kenmerk waarde bevat een term als enige waarde, een waarde in een lijst van waarden, of als deel van een andere waarde. Om deze selector te gebruiken, voegt u een sterretje () toe voor het gelijkteken. Bijvoorbeeld, img[alt=”art”] zal afbeeldingen selecteren met de alt-tekst “abstracte kunst” en “atleet die een nieuwe sport begint”, omdat de waarde “kunst” in het woord “beginnen” zit.
Waarde staat in een door spaties gescheiden lijst:
waarde is ofwel de enige attribuutwaarde, ofwel een hele waarde in een door spaties gescheiden reeks waarden. In tegenstelling tot de “bevat” selector zal deze selector niet zoeken naar de waarde als een woordfragment. Om deze selector te gebruiken voegt u een tilde (~) toe voor het gelijkteken. Bijvoorbeeld, img[alt~=”art”] zal afbeeldingen selecteren met de alt-tekst “abstracte kunst” en “kunstshow”, maar niet “atleet die een nieuwe sport begint” (wat de “bevat” selector zou selecteren).
Waarde begint met:
attribuutwaarde begint met de geselecteerde term. Om deze selector te gebruiken, voeg je een caret (^) toe voor het gelijkteken. Vergeet niet dat hoofdlettergevoeligheid belangrijk is. Bijvoorbeeld, img[alt^=”art”] zal afbeeldingen selecteren met de alt-tekst “kunstvoorstelling” en “artistiek patroon”, maar niet een afbeelding met de alt-tekst “Arthur Miller” omdat “Arthur” met een hoofdletter begint.
De waarde in een door streepjes gescheiden lijst:
Deze selector lijkt sterk op de “begint met” selector. Hier komt de selector overeen met een waarde die ofwel de enige waarde is, ofwel de eerste in een door streepjes gescheiden lijst van waarden. Om deze selector te gebruiken, voegt u een pijpteken (|) toe vóór het gelijkteken. Bijvoorbeeld, li[data-years|=”1900″] zal lijstitems selecteren met een data-years waarde van “1900-2000”, maar niet het lijstitem met een data-years waarde van “1800-1900”.
Waarde eindigt met:
attribuutwaarde eindigt met de geselecteerde term. Om deze selector te gebruiken, voegt u een dollarteken ($) toe voor het gelijkteken. Bijvoorbeeld, a[href$=”pdf”] selecteert elke link die eindigt op .pdf.
Combineren van CSS waarden
U kunt een attribuutselector combineren met andere selectors, zoals tag, klasse of ID. Zie hieronder:
div[attribute="value"] {
/* stijlregels hier */
}
.module[attribute="value"] {
/* stijlregels hier */
}
#header[attribute="value"] {
/* stijlregels hier */
}
Meer info over Attribute en CSS
- css-tricks.com/almanac/selectors/a/attribute (aanbevolen)
- The Skinny on Attribute Selectors
- Attribute selectors at MDN
- Attribute selectors in the W3C CSS spec
Vragen over attribute CSS
https://stackoverflow.com/questions/65086625/hide-element-if-data-contains-specific-piece-of-text