Wat is een CSS-kiezer?

Degui Adil/Getty Images

CSS vertrouwt op patroonovereenkomstregels om te bepalen welke stijl van toepassing is op welk element in het document. Deze patronen heten selectors en ze variëren van tagnamen (bijvoorbeeld

|__+_| om alinea-tags te matchen) tot zeer gecompliceerde patronen die overeenkomen met zeer specifieke delen van een document. Bijvoorbeeld |__+_| zou overeenkomen met een |__+_| tag met een klasse van |__+_| dat is een onderliggend item van de alinea met de id |__+_|Een CSS-selector is het deel van een CSS-stijlaanroep die aangeeft welk deel van de webpagina moet worden opgemaakt. De selector bevat een of meer eigenschappen die bepalen hoe de geselecteerde HTML

De CSS-kiezers

Er zijn verschillende soorten selectors:

• type selectors – overeenkomend met een specifiek element
• klassekiezers - overeenkomende elementen met een specifieke klasse
• ID-selectors - het element matchen met een specifieke ID
• afstammeling selectors – bijpassende elementen die afstammelingen zijn van een specifiek element
• onderliggende selectors - overeenkomende elementen die een kind zijn van het specifieke element
• universele selectors – passend bij elk element
• aangrenzende broers en zussen selectors - overeenkomende elementen onmiddellijk voorafgegaan door een specifiek element
• attribuutselectors – overeenkomende elementen met een specifiek attribuut of attribuutwaarde
• pseudo-klasse selectors – overeenkomende elementen met een specifieke pseudo-klasse
• pseudo-elementselectors - overeenkomende elementen met specifieke pseudo-elementeigenschappen

CSS-stijlen en CSS-kiezers opmaken

Het formaat van a CSS-stijl het lijkt hierop:

|__+_|

Scheid meerdere selectors met dezelfde stijl met komma's. Dit wordt selectorgroepering genoemd. Bijvoorbeeld:

|__+_|

Selectors groeperen is een verkort mechanisme om uw CSS-stijlen compact te houden. De bovenstaande groepering zou hetzelfde effect hebben als:

|__+_|

Test altijd uw CSS-kiezers

Niet alle oudere browsers ondersteunen alle CSS-kiezers. Als u CSS instelt voor gebruik met browsers zo oud als IE8 of ouder, zorg er dan voor dat u uw selectors test in zoveel browsers op zoveel besturingssystemen als u denkt dat ze kunnen worden gebruikt om toegang te krijgen tot uw code. Als u CSS1 gebruikt, CSS2 , of CSS3-selectors voor gebruik met huidige browsers, zou in orde moeten zijn.