Vad är en CSS-väljare?

CSS är beroende av mönster matchande regler för att bestämma vilken stil som gäller för vilket element i dokumentet. Dessa mönster kallas selektorer och de varierar från taggen namn (till exempel,

p för att matcha stycketiketter) till mycket komplicerade mönster som matchar mycket specifika delar av ett dokument (till exempel,

p # myid> b.highlight skulle matcha någon

b tagg med en klass av

markera det är ett barn i stycket med id

mitt ID).

En CSS-väljare är den del av ett CSS-stilsamtal som identifierar vilken del av webbsidan som ska utformas. Väljaren innehåller en eller flera egenskaper som definierar hur den valda HTML-formatet kommer att stylas.

CSS Selectors

Det finns flera olika typer av väljare:

typ valörer - som matchar ett visst element
klassväljare - matchande element med en specifik klass
ID-selektorer - matchar elementet med ett specifikt ID
efterföljande väljare - matchande element som är efterkommande av ett visst element
barnväljare - matchande element som är ett barn av det specifika elementet
universella väljare - som matchar vilket element som helst
angränsande syskonväljare - matchande element föregås genast av ett specifikt element
attribut väljare - matchande element med ett specifikt attribut eller attributvärde
pseudoklassmarkörer - matchande element med en specifik pseudoklass
pseudo-element väljare - matchande element med specifika pseudo-element egenskaper

Formatera CSS-format och CSS-selektorer

Formatet av en CSS-stil ser så här ut:

selector {style property: style; }

Separera flera väljare som har samma stil med kommatecken. Detta kallas selector grouping. Till exempel:

selector1 , selector2 {style property: style; }

Gruppering av väljare är en stenografi mekanism för att hålla dina CSS-stilar kompakta. Ovanstående gruppering skulle ha samma effekt som:

selector1 {style property: style; }selector2 {style property: style; }

Test alltid dina CSS Selectors

Inte alla webbläsare stöder alla CSS-väljare. Så var noga med att testa dina väljare i så många webbläsare på så många operativsystem som du kan. Men om du använder CSS1 eller CSS2 selektorer ska du vara bra.