Du har en navigasjonsmeny med en nestet liste inni en annen liste. Du skriver ul li i CSS-en for å style listeelementene, men plutselig påvirkes også undermenyens elementer. Du ville bare treffe det øverste nivået, ikke alt som ligger dypere nede. Problemet er at du brukte feil combinator. CSS combinators bestemmer nøyaktig hvilke elementer som treffes basert på deres relasjon til andre elementer i HTML-strukturen.
Descendant selector: mellomrom mellom selektorer
Den mest brukte combinatoren er descendant selector, som skrives med et enkelt mellomrom. nav a velger alle lenker som ligger innenfor et nav-element, uansett hvor dypt de er nestet. Det spiller ingen rolle om lenken er et direkte barn eller ligger tre nivåer ned i strukturen. Descendant selector finner den uansett.
Denne bredden er både styrken og svakheten. Skriver du .sidebar ul, treffer du ikke bare den øverste listen i sidepanelet, men også alle lister som ligger inni den listen. For enkle strukturer fungerer det fint. For nestede menyer og komplekse layouter kan det skape uventede resultater. Når du oppdager at stiler treffer elementer du ikke forventet, er descendant selector ofte årsaken.
Child selector: bare direkte barn med >
Child selector bruker tegnet > og velger kun elementer som er direkte barn av forelderen. nav > ul treffer bare ul-elementer som ligger rett innenfor nav, ikke ul-elementer som er nestet dypere. Forskjellen fra descendant selector er presis: child selector stopper etter ett nivå.
Tenk deg en todelt navigasjon. Du har en hovedmeny med en undermeny inni hvert punkt. Med .meny > li treffer du bare de øverste listepunktene. Med .meny li treffer du alle listepunktene, inkludert undermenyens. Denne forskjellen er grunnen til at erfarne utviklere ofte foretrekker child selector fremfor descendant selector. Den er mer forutsigbar.
En vanlig feil er å glemme mellomrommene rundt >. Skriver du nav>ul fungerer det, men nav > ul er lettere å lese. Begge er teknisk gyldige. Velg den varianten teamet ditt er enige om, og hold deg til den.
Adjacent sibling selector: neste søskenelement med +
Adjacent sibling selector bruker + og velger det første elementet som kommer rett etter et annet element på samme nivå. h2 + p treffer bare den første paragrafen etter en h2-overskrift. Har du tre paragrafer etter overskriften, treffes kun den første.
Denne combinatoren er spesielt nyttig for typografi. Du kan fjerne toppmargen på den første paragrafen etter en overskrift, slik at overskriften og teksten visuelt henger tettere sammen. Eller du kan gi det første elementet etter en seksjonstittel en annen skriftstørrelse. Poenget er presisjon: du treffer nøyaktig ett bestemt element basert på hva som kommer rett foran det.
Et krav som mange overser: elementene må være søsken, altså ligge på samme nivå i HTML-strukturen. Hvis paragrafen er pakket inn i en div etter overskriften, treffer ikke h2 + p. Da treffer h2 + div i stedet, fordi div-en er det faktiske søskenelementet.
General sibling selector: alle følgende søsken med ~
General sibling selector bruker ~ og fungerer som en bredere versjon av adjacent sibling. I stedet for å treffe bare det neste søskenelementet, treffer den alle matchende søskenelementer som kommer etter. h2 ~ p velger alle paragrafer som følger etter en h2, så lenge de ligger på samme nivå.
Forskjellen mellom + og ~ koker ned til omfang. Bruker du #intro + p, treffer du bare den ene paragrafen rett etter elementet med id "intro". Bruker du #intro ~ p, treffer du alle paragrafene som følger etter, uansett om det ligger andre elementer mellom dem.
General sibling selector er mindre brukt enn de andre CSS combinators, men den løser problemer som ellers krever JavaScript. Et eksempel er å style alle elementer etter en bestemt markør i layouten, uten å legge til klasser på hvert enkelt element.
Velge riktig combinator
Med fire CSS combinators tilgjengelig kan det være fristende å alltid bruke descendant selector fordi den er enklest. Men den treffer for bredt i de fleste tilfeller. En god tommelfingerregel er å starte med den mest spesifikke combinatoren som løser problemet:
- Mellomrom (descendant): Bruk når du vil treffe alle matchende elementer uansett dybde.
- > (child): Bruk når du bare vil treffe direkte barn, typisk i navigasjonsmenyer og lister.
- + (adjacent sibling): Bruk når du vil treffe nøyaktig det neste søskenelementet.
- ~ (general sibling): Bruk når du vil treffe alle følgende søskenelementer.
Alle fire combinators har spesifisitet basert på selektorene de kombinerer, ikke combinatoren selv. nav > ul og nav ul har nøyaktig lik spesifisitet: 0-0-2. Combinatortegnet legger ikke til ekstra vekt. Vil du forstå dette bedre, les artikkelen om spesifisitet i CSS.
Neste steg
CSS combinators gir deg kontroll over hvilke elementer som treffes basert på HTML-strukturen. Kombinert med attribute selectors og grunnleggende CSS-selektorer har du verktøyene du trenger for å skrive presise, vedlikeholdbare stilregler. For en fullstendig referanse med alle kombinasjonsmuligheter, se MDN sin oversikt over CSS combinators.
Denne artikkelen bygger på innhold fra kurset CSS - selektorer på Utdannet.no. I kurset jobber du med alle fire combinators i praksis, lærer å kombinere dem med klasse- og attributtselektorer, og bygger reelle layouter der presis seleksjon er avgjørende.
