Attribuut selectoren zijn een speciaal soort selector die elk element zal selecteren dat de juiste attributes en / of attribuutwaarden heeft.  De algemene syntax van deze selector bestaat uit vierkante haakjes ([]) met daarin een attribuutnaam gevolgd door een optionele waarde voor dat attribuut.  Attribuutselectoren kunnen naar gelang hoe ze attribuutwaarden matchen onderverdeeld worden in twee categoriëen:  Aanwezigheids- en waarde attribuutselectoren en Substring waarde attribuutselectoren.

Aanwezigheids- en waarde attribuutselectoren

Deze attribuutselectoren proberen een exacte attribuutwaarde te selecteren:

  • [attr] : Deze selector zal alle elementen selecteren die het attribuut attr hebben, ongeacht de waarde ervan.
  • [attr=val] : Deze selector zal alle elementen selecteren met het attribuut attr, maar enkel indien de waarde val is.
  • [attr~=val]: Deze selector zal alle elementen met het attribuut attr selecteren, maar enkel indien de waarde val één van de waarden (in een door spaties-gescheiden lijst) is in attr's waarde, bv. een enkele klasse in een spatie-gescheiden lijst van klassen.

Kijken we naar een voorbeeld, op basis van volgend stukje HTML:

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

En de CSS:

/* All elements with the attribute "data-vegetable"
   are given green text */
[data-vegetable] {
  color: green;
}

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[data-vegetable~="spicy"] {
  color: red;
}

Het resultaat is als volgt:

Opmerking: De data-* attributen uit dit voorbeeld worden data attributen genoemd.  Ze vormen een manier om eigen data op te slaan in een HTML-attribuut zodat het later op een eenvoudige wijze kan opgehaald en gebruikt worden.  Voor meer uitleg kan je terecht in volgend artikel: Hoe data attributen gebruiken.

Substring waarde-attribuutselectoren

Attribuut selectoren in deze categorie zijn ook gekend als "RegExp-achtige selectoren", omdat ze flexibele vergelijkingsmechanismen bieden die gelijkaardig zijn aan die van  regular expression (het zijn echter geen "echte" reguliere expressies):

  • [attr|=val] : Deze selector zal alle elementen selecteren waarvan het attribuut attr een waarde heeft die exact overeenkomt met val of waarvan de waarde begint met val- (opgelet, het koppelteken is hier geen fout, dit is om taalcodes te kunnen invoegen).
  • [attr^=val] : Deze selector zal alle elementen selecteren waarvan het attribuut attr een waarde heeft die begint met val.
  • [attr$=val] : Deze selector zal alle elementen selecteren waarvan het attribuut attr een waarde heeft die eindigt op val.
  • [attr*=val] : Deze selector zal alle elementen selecteren waarvan het attribuut attr een waarde heeft die de string val bevat (anders dan [attr~=val] behandelt deze selector spaties niet als een scheiding tusen een lijst van waarden, maar als deel van de waarde).

Laat ons het vorige voorbeeld verder zetten en de volgende CSS regels toevoegen:

/* Classic usage for language selection */
[lang|=fr] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the value "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

 

Met die nieuwe regels krijgen we het volgende resultaat:

Actief leren: voetbaluitslagen stijlen

In deze actief leren zouden we graag hebben dat je probeert om attribuutselectoren toe te voegen aan een lijst van voetbaluitslagen.  Er zijn drie dingen die je moet doen:

  • De eerste drie regels voegen een icoon van een Britse, Duitse en Spaanse vlag toe, aan de linkerkant van de lijstitems.  Je moet de jusite attribuutselectoren invullen zodat de teams de juiste vlaggen krijgen, overeenkomstig met de taal.
  • Regels 4–6 voegen een achtergrondkleur toe aan de lijstitems om aan te geven of het team naar steeg in de ranking (groen, rgba(0,255,0,0.7)), daalde (rood, rgba(255,0,0,0.5)), of hun positie behielden (blauw, rgba(0,0,255,0.5).)  Vul de juiste attribuutselectoren in om de kleuren te matchen aan de teams.  Je kan dit doen met behulp van de strings die voorkomen in de inc, same en dec strings die voorkomen als de data-perf attribuutwaarden.
  • Regels 7–8 maken dat teams die gepromoveerd worden vet worden weergegeven, en teams die in gevaar zijn om te demoveren cursief en grijs staan.  Vul de toepasselijke attribuutselectoren in die deze stijlen aan de juiste teams matchen.  Je kan hiervoor de pro en rel strings gebruiken die als waarde voorkomen in de data-perf attribuut waarden.

Indien je een fout maakt kan je altijd herbeginnen met behulp van de Reset knop.  Als je er niet uit komt, kan je op de Show solution knop drukken om een mogelijk antwoord te zien.

Wat komt er nu?

Hierna schakelen we een versnelling hoger en kijken we naar Pseudo-klassen en pseudo-elementen.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,