Du har en nettside med flere overskrifter, avsnitt og lenker. Du vil at navigasjonsmenyen skal ha blå bakgrunn, men resten av siden skal være hvit. Du vil at noen overskrifter skal være store og andre små. Problemet er at alle h2-elementer ser like ut. Hvordan forteller du CSS hvilke elementer som skal styles forskjellig? Svaret er CSS-selektorer. De bestemmer hvilke HTML-elementer en CSS-regel gjelder for.
Typeselektorer: style alle elementer av en type
Den enkleste selektoren er typeselektoren. Du skriver navnet på HTML-elementet direkte, for eksempel p, h1 eller a. Regelen gjelder da for alle elementer av den typen på hele siden. Skriver du p { color: blue; }, blir all tekst i alle avsnitt blå.
Typeselektorer er nyttige for å sette grunnleggende styling. De fleste nettsider starter med å definere skriftstørrelse på body, farge på overskrifter og spacing på avsnitt. Men med en gang du trenger forskjellig styling på to elementer av samme type, trenger du noe mer presist.
Klasseselektorer: det viktigste verktøyet i CSS
En klasseselektor velger elementer basert på verdien av class-attributten i HTML. I CSS skriver du et punktum etterfulgt av klassenavnet: .featured { background: yellow; }. Bare elementer med class="featured" får den gule bakgrunnen.
Det som gjør klasser så kraftige er at du kan bruke samme klasse på så mange elementer du vil, og ett element kan ha flere klasser. Skriver du class="featured large", kan du style elementet med både .featured og .large. Denne fleksibiliteten gjør klasseselektoren til den mest brukte selektoren i profesjonell CSS. De aller fleste CSS-regler du skriver i et virkelig prosjekt bruker klasser.
En vanlig feil er å velge klassenavn som beskriver utseende i stedet for funksjon. .red-text er et dårlig klassenavn fordi fargen kan endre seg. .error-message er bedre fordi det beskriver hva elementet er, ikke hvordan det ser ut.
ID-selektorer: kraftig, men sjelden riktig valg
ID-selektoren bruker hashtegnet: #navigation { background: navy; }. Den velger elementet med id="navigation". En ID kan bare brukes en gang per side, og det er en viktig forskjell fra klasser.
ID-selektorer har mye høyere spesifisitet enn klasser. Det betyr at en ID-regel overstyrer en klasseregel selv om klasseregelen kommer senere i koden. Dette høres praktisk ut, men det gjør CSS-en vanskeligere å overstyre og vedlikeholde. Mange erfarne utviklere unngår ID-selektorer i CSS helt og bruker dem bare som ankerpunkter i HTML eller for JavaScript. Hold deg til klasser i CSS, så slipper du spesifisitetsproblemer.
Universalselektoren og grupperingsselektoren
Universalselektoren * velger alle elementer på siden. Den brukes ofte i en "CSS reset" der du fjerner nettleserens standardmargin og padding: * { margin: 0; padding: 0; }. Utenom dette har universalselektoren begrenset praktisk bruk.
Grupperingsselektoren lar deg gi flere selektorer samme regler ved å skille dem med komma. I stedet for å skrive samme regel tre ganger for h1, h2 og h3, skriver du h1, h2, h3 { font-family: Georgia; }. Det reduserer gjentakelse og holder CSS-en din kompakt.
Kombinere CSS-selektorer for presisjon
Den virkelige kraften i CSS-selektorer kommer når du kombinerer dem. En descendant-selektor bruker mellomrom mellom to selektorer: nav a { color: white; } treffer alle lenker som er inne i et nav-element, uansett hvor dypt nestet de er. Andre lenker på siden påvirkes ikke.
Du kan også kombinere type og klasse uten mellomrom: p.intro treffer bare p-elementer som har klassen "intro". Et div-element med samme klasse påvirkes ikke. Denne teknikken gir deg presis kontroll uten å lage nye klasser for alt.
Attributtselektorer velger elementer basert på deres HTML-attributter. a[target="_blank"] treffer bare lenker som åpnes i ny fane. Du kan for eksempel legge til et ikon etter slike lenker, slik at brukeren vet at de forlater siden. MDN sin referanse over CSS-selektorer gir deg en komplett oversikt over alle variantene.
Spesifisitet: hvorfor rekkefølge ikke alltid avgjør
Når to CSS-regler peker på samme element, vinner regelen med høyest spesifisitet. Nettleseren regner ut poeng: et elementnavn gir 1 poeng, en klasse gir 10 poeng, og en ID gir 100 poeng. p.intro (11 poeng) slår p (1 poeng), selv om p-regelen kommer senere i koden.
Dette forklarer hvorfor CSS noen ganger oppfører seg uventet. Du legger til en ny regel, men ingenting endres. Sjekk spesifisiteten. Åpne Chrome DevTools (høyreklikk, velg "Inspiser"), og se hvilke regler som er gjennomstreket. De reglene tapte spesifisitetskampen. DevTools er det beste verktøyet for å feilsøke CSS-selektorer i praksis. Du kan lese mer om spesifisitet i artikkelen om spesifisitet i CSS.
Typiske feil med CSS-selektorer
Den vanligste feilen er å bruke for spesifikke selektorer. Skriver du div.container ul li a.link, har du bundet CSS-en til en bestemt HTML-struktur. Endrer du HTML-en, knekker CSS-en. Bruk heller en klasse direkte på elementet du vil style.
En annen feil er å ty til !important når en regel ikke virker. Det er nesten alltid et tegn på at selektorstrukturen din har blitt for kompleks. I stedet for å bruke !important, bør du forenkle selektorene og sørge for at spesifisiteten er forutsigbar. Flate selektorer med ett nivå av klasser gir deg CSS som er enkel å forstå og vedlikeholde.
Neste steg
Nå vet du hvordan CSS-selektorer fungerer og hvordan du velger riktige elementer. For å forstå fullt ut hvorfor noen regler vinner over andre, les videre om spesifisitet i CSS. Vil du lære hvordan egenskaper automatisk overføres fra foreldre til barn-elementer, er arv i CSS et naturlig neste steg.
Denne artikkelen bygger på videoleksjoner fra kursene CSS – komplett guide og CSS – selektorer på Utdannet.no. I kursene jobber du praktisk med selektorer, kombinasjoner og spesifisitet gjennom oppgaver og prosjekter.
