CSS Attribute Selector Detailed

CSS 2 heeft eigenschapsselectoren geïntroduceerd.

Eigenschapsselectoren kunnen elementen kiezen op basis van de eigenschappen en de waarden van de eigenschappen.

Eenvoudige eigenschapsselectie

Als je een element wilt kiezen met een bepaalde eigenschap, ongeacht de waarde van de eigenschap, kun je een eenvoudige eigenschapsselectie gebruiken.

Voorbeeld 1

Als je alle elementen die een titel (title) bevatten rood wilt maken, kun je schrijven:

*[title] {color:red;}

Probeer het zelf uit

Voorbeeld 2

Vergelijkbaar met bovenstaande, kun je de stijl alleen toepassen op aanknopingspunten (a-elementen) met een href-eigenschap:

a[href] {color:red;}

Probeer het zelf uit

Voorbeeld 3

Je kunt ook op basis van meerdere eigenschappen kiezen, je hoeft alleen de eigenschapsselectoren met elkaar te koppelen.

Bijvoorbeeld, om de tekst van HTML-hyperlinks met zowel href- als title-eigenschappen rood te maken, kun je het volgende schrijven:

a[href][title] {color:red;}

Probeer het zelf uit

Voorbeeld 4

Er kunnen creatieve methoden worden gebruikt om deze eigenschap te benutten.

Bijvoorbeeld, je kunt stijlen toepassen op alle afbeeldingen met een alt-eigenschap om deze effectief te markeren:

img[alt] {border: 5px solid red;}

Probeer het zelf uit

Tip:Deze specifieke voorbeeld is meer geschikt voor diagnose dan voor ontwerp, dus om te bevestigen of een afbeelding echt geldig is.

Voorbeeld 5: Gebruik van eigenschapsselectors in XML-documenten

Eigenschapsselectors zijn in XML-documenten zeer nuttig, omdat het XML-taal aanbeveelt om element- en attribuutnamen te specificeren op basis van de bedoeling van de elementen en attributen.

Stel dat we een XML-document hebben ontworpen voor het beschrijven van planeten in het zonnestelsel. Als we alle planet-elementen met een moons-eigenschap willen selecteren en deze rood willen maken om meer aandacht te besteden aan planeten met maan, kunnen we het volgende schrijven:

planet[moons] {color:red;}

Dit maakt de tekst van de tweede en derde elementen in de volgende markering rood, maar de tekst van het eerste element is niet rood:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Bekijk het effect

Selecteren op specifieke eigenschapswaarden

Naast het selecteren van elementen met bepaalde eigenschappen, kan de zoekruimte verder worden verfijnd door alleen elementen met specifieke eigenschapswaarden te kiezen.

Voorbeeld 1

Bijvoorbeeld, als je een hyperlink naar een specifieke document op een webserver rood wilt maken, kun je het volgende schrijven:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Probeer het zelf uit

Voorbeeld 2

Net als bij eenvoudige eigenschapsselectors, kunnen meerdere eigenschap-waarde selectors worden gekoppeld om een document te selecteren.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Dit maakt de tekst van de eerste hyperlink in de volgende markering rood, maar de tweede of derde link wordt niet beïnvloed:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Probeer het zelf uit

Voorbeeld 3

Op dezelfde manier kan het XML-taal ook deze methode gebruiken om stijlen in te stellen.

Laten we nu terugkijken naar het voorbeeld van de planeet. Stel dat je alleen de planet-elementen wilt kiezen die de waarde van de moons-eigenschap 1 hebben:

planet[moons="1"] {color: red;}

De bovenstaande code maakt de tweede element van de volgende markering rood, maar de eerste en derde elementen worden niet beïnvloed:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Bekijk het effect

Eigenschappen en eigenschapswaarden moeten volledig overeenkomen

Let op, deze opmaak vereist een volledige overeenkomst met de eigenschapswaarde.

Als de eigenschapswaarde een lijst van waarden bevat gescheiden door spaties, kan de match mogelijk problematisch zijn.

Overweeg de volgende markeringen:

<p class="important warning">Dit paragraaf is een zeer belangrijke waarschuwing.</p>

Als je dit schrijft als p[class="important"], dan kan deze regel de voorbeeldmarkering niet matchen.

Om een element te kiezen op basis van een specifieke eigenschapswaarde, moet je dit zo schrijven:

p[class="important warning"] {color: red;}

Probeer het zelf uit

Selectie op basis van de deelwaarde van de eigenschap

Als je wilt kiezen op basis van een woord uit een lijst van woorden in de eigenschapswaarde, moet je het schuine streepje (~) gebruiken.

Stel dat je wilt kiezen voor elementen met de class-eigenschap die important bevat, je kunt dit bereiken met de volgende selector:

p[class~="important"] {color: red;}

Probeer het zelf uit

Als de schuine streep wordt genegeerd, betekent dit dat een volledige waardeovereenkomst moet worden voltooid.

Het verschil tussen de deelwaarde eigenschapselector en de puntklasse naamnotatie

Deze selector is equivalent aan de puntklasse naamnotatie die we eerder hebben besproken in de klasse selector.

Dus, p.important en p[class="important"] zijn equivalent wanneer ze worden toegepast op een HTML-document.

Waarom zou je dan de eigenschapselector "~=" nodig hebben? Omdat deze kan worden gebruikt voor elke eigenschap, niet alleen voor class.

Bijvoorbeeld, kan er een document zijn met een groot aantal afbeeldingen, waarvan er maar een deel afbeeldingen zijn. Voor dit doel kan een selectie-eigenschap op basis van de title van het document worden gebruikt om alleen deze afbeeldingen te kiezen:

img[title~="Figure"] {border: 1px solid gray;}

Deze regel selecteert alle afbeeldingen waarvan de title-tekst "Figure" bevat. Afbeeldingen zonder title-eigenschap of waarvan de title-eigenschap niet "Figure" bevat, zullen niet worden geselecteerd.

Probeer het zelf uit

Substrings matchende eigenschapsselectoren

Ik zal je nu een meer geavanceerd selectormodule voorstellen, die na het voltooien van CSS2 is uitgebracht en meer onderdelen van de deelwaarde-eigenschapsselectoren bevat. Volgens de norm zou het moeten worden genoemd als "substrings matchende eigenschapsselectoren".

Vele moderne browsers ondersteunen deze selectoren, inclusief IE7.

Het volgende overzicht biedt een eenvoudige samenvatting van deze selectoren:

Type Description
[abc^="def"] Selecteer alle elementen waarvan de abc-eigenschapswaarde begint met "def"
[abc$="def"] Selecteer alle elementen waarvan de abc-eigenschapswaarde op "def" eindigt
[abc*="def"] Selecteer alle elementen waarvan de abc-eigenschapswaarde de substring "def" bevat

Men kan denken dat deze selectoren veel toepassingen hebben.

Laten we aannemen dat je stijlen wilt toepassen op alle links die naar CodeW3C.com verwijzen, dan hoef je geen class voor alle deze links te specificeren en stijlen te schrijven op basis van deze klasse, maar je hoeft alleen de volgende regel te schrijven:

a[href*="codew3c.com"] {color: red;}

Probeer het zelf uit

Tip:Elke eigenschap kan met deze selectoren worden gebruikt.

Specifieke eigenschapsselectortype

Ik zal je nu de specifieke eigenschapsselector voorstellen. Kijk naar het volgende voorbeeld:

*[lang|="en"] {color: red;}

Deze regel selecteert alle elementen met een lang-eigenschap gelijk aan en of die beginnen met en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Probeer het zelf uit

Over het algemeen kan [att|="val"] worden gebruikt voor elke eigenschap en waarde.

Stel dat er in een HTML-document een reeks afbeeldingen is, waarbij elke afbeelding een bestandsnaam heeft zoals figure-1.jpg en figure-2.jpgMet deze selector kan je alle deze afbeeldingen matchen:

img[src|="figure"] {border: 1px solid gray;}

Probeer het zelf uit

Natuurlijk, de meest voorkomende toepassing van deze eigenschapsselector is het matchen van taalwaarden.

CSS Selector Reference Manual

Selector Description
[attribute] Used to select elements with specified attributes.
[attribute=value] Used to select elements with specified attributes and values.
[attribute~=value] Used to select elements that contain the specified term in the attribute value.
[attribute|=value] Used to select elements with attribute values that start with the specified value, and the value must be a whole word.
[attribute^=value] Matches each element that starts with the specified value in the attribute value.
[attribute$=value] Matches each element that ends with the specified value in the attribute value.
[attribute*=value] Matches each element that contains the specified value in the attribute value.