CSS 2.1 Selectors, deel 1

Arjan Snaterse

28 mei 2007

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 diezelfde reden zal ik typische ?selector-termen? ook niet altijd vertalen.

Een stukje intro

Eén van de eerste dingen die je leert als je begint met CSS is het gebruik van selectors. Selectors zijn een fundamenteel onderdeel van CSS, maar er zijn maar weinig ontwikkelaars die ze volledig benutten. Een heleboel speel je al klaar met alleen de type, ID en class selectors, maar er zijn er nog veel meer!

Als je leert om het complete selector pakket goed te gebruiken, helpt je dat behoorlijk om de HTML code goed schoon te houden. Zo voorkomt het onnodig gebruik van classes of zelfs extra markup als div of span elementen. Nou, dat klinkt toch mooi?

Maar waarom worden de selectors niet zo gebruikt dan? Nou, de belangrijkste reden hiervoor is, jawel, de onvoldoende ondersteuning van Internet Explorer (t/m versie 6). Het goede nieuws is dat Internet Explorer 7 selectors al een stuk beter ondersteunt. Alle andere recente browsers ondersteunen het wel goed. Let daar dus goed op voordat je alles klakkeloos overneemt.

Omdat er nogal veel CSS selectors zijn is het iets teveel om het in één artikel te behandelen, dus splitsen we het op in drie delen:

  1. Deel 1, dit artikel, legt de basisbeginselen uit plus het gebruik van de universele, type, ID en class selectors.
  2. Deel 2 gaat over combinatoren, gecombineerde selectors, grouping en attribuut selectors.
  3. Deel 3 zal gaan over pseaudo-classes en pseudo-elementen.

Ok, aan de slag!

De basisbeginselen van selectors

Eerst even heel erg basis. Een CSS selector is opgemaakt uit een patroon dat wordt getoetst aan alle elementen in de document tree. Als alle condities van het patroon ‘waar’ zijn dan worden alle declaraties binnen de CSS ‘regel’ toegepast op dat element of alle elementen die daaronder vallen. Kijk maar naar de volgende CSS regel.


p { color: #f00; }

De selector is het gedeelte van de CSS regel dat voor de openende accolade ( { ) komt. De selector in dit voorbeeld is dus p en zorgt ervoor dat de tekst binnen alle p elementen in het document rood zullen zijn. Erg simpel dus.

Selector overzicht

Dat was dus een erg simpel voorbeeld. Later zullen alle andere selectors ook aan de beurt komen en zal het uiteraard ook wat ingewikkelder worden. Maar voordat we daaraan beginnen eerst maar even een overzicht van de syntax voor alle CSS 2.1 selectors (gebaseerd op de tabel uit CSS 2.1, 5.1 Pattern Matching).

Selector type Pattern Description
Universal * Matcht elk element.
Type E Matcht elk E element.
Class .info Matcht elk element waarvan het class attribuut de waarde info bevat.
ID #footer Matcht elk element met een id gelijk aan footer.
Descendant E F Matcht elk F element welk een ‘afstammeling’ is van een E element.
Child E > F Matcht elk F element welk een kind is van een E element.
Adjacent E + F Matcht elk F element onmiddellijk voorafgaand door een ‘sibling’ element E.
Attribute E[att] Matcht elk E element dat een att attribuut heeft, ongeacht de waarde.
Attribute E[att=val] Matcht elk E element waarvan de att attribuut waarde gelijk is aan val.
Attribute E[att~=val] Matcht elk E element waarvan de att attribute waarde een lijst van spatie gescheiden waarde, waarvan er één precies val is.
Attribuut E[att|=val] Matcht elk E element waarvan het att attribuut een door koppelstreep gescheiden lijst van waarden is, waarvan de waarde beginnen met val.
The :first-child pseudo-class E:first-child Matcht element E wanneer E het eerste kind van de ouder is.
The link pseudo-classes E:link
E:visited
Matcht nog niet bezochte (:link) of juist wel bezochte (:visited) links.
The dynamic pseudo-classes E:active
E:hover
E:focus
Matcht E tijdens bepaalde acties van de gebruiker.
The :language pseudo-class E:lang(c) Matcht elementen van type E die in de c taal zijn.
The :first-line pseudo-element E:first-line Matcht de inhoud van de eerst opgemaakte regel van element E.
The :first-letter pseudo-element E:first-letter Matcht de eerste letter van element E.
The :before and :after pseudo-elements E:before
E:after
Wordt gebruikt om content voor of na de content van het element toe te voegen.

In deel 2 en 3 van deze serie zal ik elke selector uitgebreider behandelen. Een paar termen die in de tabel werden gebruikt behoeven denk ik nog wel wat verdere uitleg:

  • Descendant: Een element dat een kind, kleinkind of nog latere ‘afstammeling’ is van een element in de document tree.
  • Ancestor: Een element dat de ouder, grootouder, of nog vroegere ‘afstammeling’ is van een element uit de document tree
  • Child: De directe descendant van een element. Er mogen dus geen andere elementen tussen komen.
  • Parent: De directe ouder van een element. Er mogen dus geen andere elementen tussen komen.
  • Sibling: Een element dat dezelfde ouder heeft als het huidige element.

Enkele en gecombineerde selectors

Er zijn bij de selectors twee basiscategorieën : enkele en gecombineerde.

Een enkele selector bestaat uit òf een type selector òf een universele selector gevolgd door één of meer attribuut selectors, ID selectors of pseudo-classes. Onderstaande regel is een voorbeeld van zo’n enkele selector.


p.info { background: #ff0; }

Een gecombineerde selector (soms ook wel een contextuele selector genoemd) bestaat uit twee of meer enkele selectors, gescheiden door een combinator. Hieronder een voorbeeld van een eenvoudige gecombineerde selector.


div p { font-weight: bold; }

Bovenstaande regel zal toegepast worden op alle p elementen die een descendant zijn dan een div element.

Op een selector mag maar één pseudo-element toegekend worden. Bij een gecombineerde selector mag het pseudo-element alleen maar aan de laatste enkele selector toegekend worden. Details over gecombineerde selectors, combinatoren en pseudo-elemeten vind je in deel 2 en 3 van deze serie.

De universele selector

De universele selector, aangeduid met een asterisk (*), matcht alle elementen in het document. Je ziet het maar zelden in een stylesheet, maar the universele selector worden vaak gebruikt met class en ID selectors. Als de universele selector niet het enige component van een enkele selector is kan de ‘*’ worden weggelaten.

  • .myclass is hetzelfde als *.myclass
  • #myid is hetzelfde als *#myid

Een universele selector die erg vaak gebruikt wordt is er één die gebruikt wordt om de margins en paddings van alle elementen op 0 te zetten. Soms word deze ook wel de Global White Space Reset genoemd.


* { margin: 0; pading: 0; }

Type selectors

Een type selector matcht elke instantie van een bepaald element. Onderstaande regel matcht met alle p elementen in het document en zet the font size op 2em.


p { font-size: 2em; }

Class selector

De class selector wordt aangeduid met een punt (.) en is op alle elementen van toepassing met het bijbehorende class attribuut. Onderstaande regel is van toepassing op alle p elementen met de class ‘info’.


p.info { background: #ff0; }

Het is mogelijk om meerdere classes aan een element te koppelen. Het class attribuut kan meerdere waarden bevatten, gescheiden door een spatie. Class selectors kunnen dan gebruikt worden om elementen te benaderen die meerdere classes hebben. Deze regel is op alle p elemeten van toepassing die zowel ‘info’ en ‘error’ in de lijst van class namen hebben.


p.info.error { color: #900; font-weight: bold; }

Noot: Meerdere class selectors werken niet in versies van Internet Explorer 6 de lager. In IE7 wordt het wel ondersteund.

Het element type hoeft niet per se gespecificeerd te worden. Als je dit weglaat is het precies hetzelfde als het weglaten van de universele selector. Zie ook onderstaande regel, die op alle elementen van toepassing is die ‘info’ als class naam hebben.


.info { background: #ff0; }

ID selector

De ID selector wordt aangeduid met een hekje (#). Deze selector is op alle elementen van toepassing met het bijbehorende id attribuut. Onderstaande regel is van toepassing op het element (ongeacht welke type element) met als id ‘info’.


#info { background: #ff0; }

Mocht je ook het element type willen specificeren kun je de volgende code gebruiken.


p#info { background: #ff0; }

Vergeet niet dat ID selectors specifieker zijn dan class selectors en dat en ID waarde uniek moet zijn binnen document. Daarom kan een ID selector maar op één element van toepassing zijn.

Wordt vervolgd…

Ok, dan was dan deel 1 van de serie over CSS selectors. In deel 2 zullen de combinators, gecombineerde selectors, grouping en attribuut selectors worden behandeld. In deel 3 komen de pseudo-classes en pseudo-elemeten aan de beurt.

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

PS:Natuurlijk wordt er volop verder ontwikkeld met CSS en dus ook in de selectors hoek. Op CSS3.info vind je meer informatie over CSS3 en CSS3 Selectors.