CSS 2.1 Selectors, deel 2

Noot: Deze serie over CSS selectors is afkomstig van 456bereastreet.com en is met toestemming van Roger Johansson vertaald. Hier en daar zal ik ongetwijfeld wat afwijken van de vertaling, omdat dit het volgens mij wat duidelijker maakt. Om dezelfde reden zal ik typische ?selector-termen? ook niet altijd vertalen.

Dit is het tweede gedeelte van een driedelige serie over CSS selectors en het gebruik daarvan. Deel 1 gaat over de basisprincipes, zoals type selectors, ID en class selectors, de universele selector en enkelvoudige selectors.

In deze aflevering gaan we wat dieper in op de meer geavanceerde selectors, die helaas niet allemaal volledig worden ondersteund door alle browsers. Maar aangezien het zeker al beter wordt is het zeker de moeite waard om alle selectors eens goed te bekijken.

Combinatoren

Combinatoren worden gebruikt om twee enkele selectors te scheiden die gezamenlijk een gecombineerde selector vormen. De combinatoren die er zijn, zijn de witruimte (spatie, tab, new line etc.), de ‘>’ en de ‘+’. Welke functie welke combinator heeft wordt in de volgende paragrafen uitgelegd.

Descendant selectors

Een descendant selector bestaat uit twee of meer enkele selectors gescheiden door witruimte. Deze matcht elk element dat een afstammeling van de eerste enkele selector. Hieronder even een voorbeeld waarbij alle p elementen gematched worden die binnen een div zitten.


div p { color: #f00; }


Elke selector dat een descendant selector vormt kan elke variant van een enkele selector zijn. Onderstaand voorbeeld geeft een regel die alle p elementen matcht met de class ‘info’ die binnen een li zitten die op hun beurt weer binnen een div zitten met het ID ‘myid’.


div#myid li p.info { color: #f00; }


Descendant selectors geven je dus de mogelijkheid om elementen te benaderen zonder ze een class of ID te geven, wat er uiteindelijk ook weer voor zorgt dat je code mooi schoon blijft. Stel, je hebt een navigatie lijst die uit de volgende code bestaat:

• Link 1
• Link 2
• Link 3

Om nu de list items en de links aan te spreken die binnen de navigatie lijst (de ul) zitten zou je maar de volgende code te gebruiken:


#nav li { display: inline; }
#nav a { font-weight: bold; }


Deze regels matchen dus alleen maar de elementen binnen de navigatie lijst en dus geen enkel element daarbuiten. Vergelijk dat maar eens met het geven van een class of ID aan elke link. Het scheelt je dus een hoop werk als je gebruikt maakt van descendant selectors!

Child selectors

Een child selector is van toepassing op een direct ‘kind’ van een bepaald element. Deze selector bestaat uit twee of meer selectors gescheiden door een ‘groter dan’ ( > ) teken. De ‘ouder’ staat aan de linkerkant er van en het ‘kind’ aan de rechterkant. Eventuele witruimte om het >-teken is toegestaan.

Deze regel is van toepassing op alle strong elementen die een kind zijn van een div element.


div > strong { color: #f00; }


Alleen de strong elementen die een direct kind zijn van een div element worden rood gekleurd. Als er een ander element tussen de strong en de div in de document tree komt zal deze selector niet meer matchen. In het volgende voorbeeld zal alleen “Tekst 1″ door bovenstaande regel ‘gepakt’ worden.

Tekst 1

Tekst 2

Adjecent sibling selectors

Een adjacent sibling selector (sibling betekent ‘kind van dezelfde ouder’, voor het gemak noem ik het hier even ‘zusje’) is opgebouwd uit twee enkele selectors gescheiden door een plus ( + ) teken. Witruimte om de plus heen is toegestaan. De selector matcht het element dat het volgende zusje is van het eerste element. De elementen moeten dezelfde ouder hebben en het tweede element moet direct na het eerste komen.


p + p { color: #f00; }


Als bovenstaande regel op onderstaand stukje code wordt toegepast zal deze alleen van toepassing zijn op “Paragraaf 2″.

Paragraaf 1

Paragraaf 1

Grouping

Om dezelfde css regels toe te passen op verschillende elementen kun je ze grouperen door een komma gescheiden lijst in plaats van te stuk voor stuk te declareren. Een fout die veel gemaakt is, is het niet volledig noemen van de selectors. Stel, we hebben de volgende code:

News

• Item 1
• Item 2

Stel nu dat je dezelfde margin wilt toepassen op de h3 en op de ul maar alleen binnen div elementen met het ID ‘news’. Dan is dit de foute manier:


div#news h3, ul { margin: 0 2em; }


Dit zal inderdaad van toepassing zijn op de h3 en ul binnen div#news. Maar het probleem is dat dit van toepassing is op alle ul elementen in het doucment en niet alleen maar op die binnen div#news.

Hieronder dus de goede manier om selectors te grouperen:


div#news h3,
div#news ul {
margin: 0 em;
}


Dus, als je selectors wilt groeperen zul je de elke selector volledig moeten benoemen.

Attribuut selectors

Attribuut selectors matchen elementen gebaseerd op de aanwezigheid van bepaalde attributen. Er zijn vier manieren om een attribuut selector te laten matchen:

• [att]: Matcht alle elementen met een att attribuut, ongeacht de waarde.
• [att=val]: Matcht alle elementen met een att atribuut en de waarde val.
• [att~=val]: Matcht elementen wiens att attribuut een spatie gescheiden lijst is waarin de waarde val voorkomt. In dit geval mag val zelf geen spaties bevatten.
• [att|=val]: Matcht elementen wiens att attribuut een koppelstreep gescheiden lijst is die begint met val. Dit wordt vaak gebruikt om taal subcodes te matchen die gespecificeerd staan in het lang attribuut (xml:lang in XHTML), bijvoorbeeld “en”, “en-us”, “en-gb”, etc.

Even wat voorbeeldjes. De selector in het volgende voorbeeld matcht alle p elementen die een title attribuut hebben, ongeacht de waarde.


p[title] { color: #f00; }


In het volgende voorbeeld matcht de selector alle div> elementen die een class hebben met de waarde ‘error’.


div[class=error] { color: #f00; }


Om alle td elementen te matchen waarvan het attribuut headers de waarde ‘col1′ bevat kun je de volgende code gebruiken.


td[headers~=col1] { color: #f00; }


En tot slot: de selector in het volgende voorbeeld matcht alle p elementen waarvan het lang attribuut begint met en:


p[lang|=en] { color: #f00; }


Meerdere attribuut selectors kunnen gebruikt worden in dezelfde selector. Dat maakt het mogelijk om meerder attributen van hetzelfde element te matchen. De volgende regel wordt toegepast op alle blockquote elementen die een class attribuut met de waarde ‘quote’ hebben en een cite attribuut (ongeacht welke waarde):


blockquote[class=quote][cite] { color: #f00; }


Wordt vervolgd?

En dat brengt ons bij het einde van deel 2. In deel 3, het laatste deel van deze serie, zullen de pseudo-classes en pseudo-selectors aan bod komen. Mocht je het nog leuk vinden kun je ook deel 1 nog eens bekijken.

Bron: http://www.456bereastreet.com/archive/200509/css_21_selectors_part_2/