Er zijn veel manieren waarop u elementen in CSS kunt selecteren. De eenvoudigste selectie is op tagnaam, zoals p ( ). Bijna alles wat specifieker is dan een tagkiezer gebruikt attributen - classen IDbeide selecteren op die attributen op HTML-elementen. Maar classen IDzijn niet de attributen alleen ontwikkelaars kunnen selecteren. We kunnen elk van de attributen van een element als selector gebruiken.
Attribuutselectie heeft een speciale syntaxis. Hier is een voorbeeld:
a(href="https://css-tricks.com") ( color: #E18728; )Dat is een exacte match selector die alleen links selecteert met de exacte hrefattribuutwaarde van "https://css-tricks.com".
De zeven verschillende typen
Attribuutkiezers zijn standaard hoofdlettergevoelig (zie hoofdletterongevoelige overeenkomst hieronder) en worden tussen haakjes geschreven ().
Er zijn zeven verschillende soorten overeenkomsten die u kunt vinden met een attribuutselector, en de syntaxis is voor elk verschillend. Elk van de meer complexe attribuutselectors is gebaseerd op de syntaxis van de exacte matchselector - ze beginnen allemaal met de attribuutnaam en eindigen met een gelijkteken gevolgd door de attribuutwaarde (n), meestal tussen aanhalingstekens. Wat tussen de attribuutnaam en het gelijkteken gaat, maakt het verschil tussen de selectors.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Waarde bevat: kenmerkwaarde bevat een term als de enige waarde, een waarde in een lijst met waarden of als onderdeel van een andere waarde. Om deze selector te gebruiken, voegt u een asterisk (*) toe voor het gelijkteken. U img(alt*="art")selecteert bijvoorbeeld afbeeldingen met de alternatieve tekst "abstracte kunst" en "atleet die een nieuwe sport begint", omdat de waarde "kunst" in het woord "start" staat.
Waarde staat in een door spaties gescheiden lijst: waarde is ofwel de enige attribuutwaarde, of is een hele waarde in een door spaties gescheiden reeks waarden. In tegenstelling tot de selector "bevat", zal deze selector de waarde niet als een woordfragment zoeken. Om deze selector te gebruiken, voegt u een tilde (~) toe vóór het gelijkteken. Hiermee worden bijvoorbeeld img(alt~="art")afbeeldingen geselecteerd met de alternatieve tekst "abstracte kunst" en "kunstshow", maar niet "atleet die een nieuwe sport begint" (die de "bevat" -selector zou selecteren).
Waarde begint met: attribuutwaarde begint met de geselecteerde term. Om deze selector te gebruiken, voegt u een caret (^) toe vóór het gelijkteken. Vergeet niet dat hoofdlettergevoeligheid belangrijk is. Met img (alt = "art") worden bijvoorbeeld afbeeldingen geselecteerd met de alt-tekst 'art show' en 'artistiek patroon', maar geen afbeelding met de alt-tekst 'Arthur Miller', omdat 'Arthur' begint met een hoofdletter .
Waarde staat eerst in een door streepjes gescheiden lijst: deze selector lijkt sterk op de selector "begint met". Hier komt de selector overeen met een waarde die ofwel de enige waarde is, ofwel de eerste in een door streepjes gescheiden lijst met waarden. Om deze selector te gebruiken, voegt u een pipe-teken (|) toe vóór het gelijkteken. Hiermee worden bijvoorbeeld li(data-years|="1900")lijstitems met een data-yearswaarde van "1900-2000" geselecteerd , maar niet het lijstitem met een data-yearswaarde van "1800-1900".
Waarde eindigt op: attribuutwaarde eindigt op de geselecteerde term. Om deze selector te gebruiken, voegt u een dollarteken ($) toe vóór het gelijkteken. a(href$="pdf")Selecteert bijvoorbeeld elke link die eindigt op .pdf.
Een opmerking over aanhalingstekens: in sommige gevallen kunt u zonder aanhalingstekens rond de waarde gaan, maar de regels voor het selecteren zonder aanhalingstekens zijn inconsistent in alle browsers. Quotes werken altijd, dus als je ze blijft gebruiken, kun je er zeker van zijn dat je selector zal werken.
Zie de Pen Attribute Selectors door CSS-Tricks (@ css-tricks) op CodePen.
Leuk weetje: de waarden worden behandeld als strings, dus je hoeft geen fantasierijke ontsnappingen aan tekens te doen om ze overeen te laten komen, zoals je zou doen als je ongebruikelijke tekens zou gebruiken in een klasse of ID-selector.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Hoofdletterongevoelige matching
Hoofdletterongevoelige attribuutselectors maken deel uit van de Selectors Level 4-specificatie van de CSS Working Group. Zoals hierboven vermeld, zijn attribuutwaardetekenreeksen standaard hoofdlettergevoelig, maar kunnen worden gewijzigd in hoofdletterongevoelig door ivlak voor het sluitende haakje toe te voegen :
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Hoofdletterongevoelige afstemming kan erg handig zijn voor het targeten van attributen die onvoorspelbare, door mensen geschreven tekst bevatten. Stel dat u een tekstballon opmaakt in een chat-app en een "zwaaiende hand" wilt toevoegen aan berichten met de tekst "hallo" in een of andere vorm. U zou dit kunnen doen met alleen CSS, waarbij u een niet-hoofdlettergevoelige matcher gebruikt om alle mogelijke variaties op te vangen:
Zie de Pen Hoofdletterongevoelige CSS-attribuutovereenkomst door CSS-Tricks (@ css-tricks) op CodePen.
Ze combineren
U kunt een kenmerkselector combineren met andere selectors, zoals tag, klasse of ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Of combineer zelfs meerdere attribuutselectoren. In dit voorbeeld worden afbeeldingen geselecteerd met alt-tekst die het woord "person" als enige waarde of een waarde in een door spaties gescheiden lijst bevat, en een srcwaarde die de waarde "lorem" bevat:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Zie de Pen Combined Attributes en Attribute-Only Selection door CSS-Tricks (@ css-tricks) op CodePen.
Kenmerkselectors in JavaScript en jQuery
Attribuutselectors kunnen in jQuery worden gebruikt, net als elke andere CSS-selector. In JavaScript kunt u kenmerkselectors gebruiken met document.querySelector()en document.querySelectorAll().
Zie de Pen Attribute Selectors in JS en jQuery door CSS-Tricks (@ css-tricks) op CodePen.
Verwant
- klasse
- ID kaart
Meer informatie
- The Skinny on Attribute Selectors
- Attribuutkiezers bij MDN
- Kenmerkselectors in de W3C CSS-specificatie
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | Ieder | Ieder | Ieder | 7+ | Ieder | Ieder |