Hva er en CSS-velger?

Degui Adil/Getty Images

CSS er avhengig av mønstertilpasningsregler for å bestemme hvilken stil som gjelder for hvilket element i dokumentet. Disse mønstrene kalles velgere og de spenner fra merkenavn (f.eks.

|_+_| for å matche avsnittstagger) til svært kompliserte mønstre som samsvarer med svært spesifikke deler av et dokument. For eksempel |_+_| ville samsvare med hvilken som helst |_+_| tag med klassen |_+_| som er et underordnet avsnitt med ID-en |_+_|En CSS-velger er den delen av et CSS-stilkall som identifiserer hvilken del av nettsiden som skal styles. Velgeren inneholder en eller flere egenskaper som definerer hvordan den valgte HTML

CSS-velgerne

Det finnes flere forskjellige typer velgere:

• typevelgere – matcher et spesifikt element
• klassevelgere – matchende elementer med en bestemt klasse
• ID-velgere – matcher elementet med en spesifikk ID
• etterkommervelgere – samsvarende elementer som er etterkommere av et spesifikt element
• underordnede velgere – samsvarende elementer som er underordnede av det spesifikke elementet
• universelle velgere – matcher ethvert element
• tilstøtende søskenvelgere – matchende elementer umiddelbart foran et spesifikt element
• attributtvelgere – matchende elementer med en spesifikk attributt eller attributtverdi
• pseudoklassevelgere – matchende elementer med en spesifikk pseudoklasse
• pseudo-elementvelgere – matchende elementer med spesifikke pseudo-elementegenskaper

Formater CSS-stiler og CSS-velgere

Formatet til en CSS-stil ser slik ut:

|_+_|

Skill flere velgere som har samme stil med kommaer. Dette kalles velgergruppering. For eksempel:

|_+_|

Gruppering av velgere er en stenografimekanisme for å holde CSS-stilene dine kompakte. Ovennevnte gruppering vil ha samme effekt som:

|_+_|

Test alltid CSS-velgerne dine

Ikke alle eldre nettlesere støtter alle CSS-velgerne. Hvis du setter opp CSS for bruk med nettlesere så gamle som IE8 eller eldre, sørg for å teste velgerne dine i så mange nettlesere på så mange operativsystemer som du tror kan brukes for å få tilgang til koden din. Hvis du bruker CSS1, CSS2 , eller CSS3-velgere for bruk med gjeldende nettlesere, bør du ha det bra.