Du har skrevet en CSS-regel som setter overskriften til blått. Lenger ned i stilarket legger du til en regel som setter den til rødt. Begge reglene peker på samme element. Hvilken farge vinner? Svaret ligger i spesifisitet i CSS. Det er poengsystemet nettleseren bruker for å avgjøre hvilken regel som slår igjennom når flere regler konkurrerer om det samme elementet.
Slik beregner nettleseren spesifisitet i CSS
Hver CSS-selektor har en spesifisitetsverdi som nettleseren beregner automatisk. Tenk på det som et poengsystem med fire nivåer:
- Type-selektorer (h1, p, div) gir 1 poeng.
- Klasse-selektorer (.intro, .active) gir 10 poeng.
- ID-selektorer (#header, #main) gir 100 poeng.
- Inline styles (style-attributtet direkte i HTML) gir 1000 poeng.
En selektor som div .content p har en spesifisitet på 12 (to type-selektorer + en klasse). En selektor som #main .content har 110 (en ID + en klasse). Nettleseren sammenligner disse verdiene og lar den med flest poeng vinne. Det høres enkelt ut, og i de fleste tilfeller er det nettopp det.
Når spesifisiteten er lik: rekkefølgen avgjør
Hva skjer når to selektorer har nøyaktig lik spesifisitet? Da vinner den som kommer sist i stilarket. Har du to klasse-selektorer som begge treffer samme element, er det den nederste regelen som gjelder. Derfor er rekkefølgen i CSS-filen din ikke tilfeldig. Den fungerer som en tiebreaker.
Dette er grunnen til at du bør plassere mer spesifikke stiler lenger ned i stilarket. Generelle stiler først, spesifikke etterpå. Mange uventede CSS-problemer oppstår fordi en regel høyere opp i filen utilsiktet overskriver en regel lenger ned, eller omvendt.
Problemet med !important
Når ingenting annet ser ut til å fungere, griper mange til !important. Det gir regelen en spesifisitetsverdi på 10 000 poeng og trumfer alt annet. Men det er en felle. Når du først begynner å bruke !important, ender du raskt opp med flere !important-regler som kjemper mot hverandre. Da er du tilbake til samme problem, bare vanskeligere å feilsøke.
Det finnes situasjoner der !important er riktig, for eksempel i utility-klasser som skal garantere en bestemt stil uansett kontekst. Men som hovedregel bør du løse spesifisitetskonflikter ved å justere selektorene, ikke ved å skru opp volumet med !important.
Inline styles: mektig, men problematisk
Inline styles satt direkte i HTML-en med style-attributtet har en spesifisitet på 1000 poeng. Det betyr at de overskriver nesten alt du skriver i stilarket. Eneste unntak er !important. I praksis gjør inline styles det svært vanskelig å vedlikeholde og endre utseendet på en side, fordi du må inn i HTML-koden for å gjøre endringer i stedet for å jobbe i ett sentralt stilark.
Bruker du et rammeverk eller et CMS som setter inline styles automatisk, kan du oppleve at CSS-reglene dine ikke slår igjennom. Da vet du i det minste hvorfor: inline styles har høyere spesifisitet enn stilarkreglene dine. Løsningen er enten å fjerne inline-stilene fra HTML-en eller, i ytterste konsekvens, bruke !important i stilarket.
Sjekk spesifisiteten i VS Code
Du trenger ikke å beregne spesifisitet i hodet. I VS Code kan du holde musepekeren over en selektor, og editoren viser spesifisiteten som tre tall i parentes. Det første tallet representerer ID-selektorer, det andre klasser, og det tredje type-selektorer. Ser du for eksempel (0, 2, 1), har selektoren to klasser og en type-selektor.
For mer avansert feilsøking finnes MDN sin dokumentasjon av spesifisitet, som dekker alle detaljer inkludert kantsaker. Du kan også bruke verktøy som Specificity Calculator for å visualisere og sammenligne spesifisiteten til flere selektorer side om side.
Den vanligste feilen med spesifisitet
Den klassiske tabben er å bruke ID-selektorer overalt i stilarket. Siden en eneste ID-selektor har 100 poeng, må du enten bruke enda mer spesifikke selektorer eller ty til !important for å overstyre dem senere. Resultatet er et stilark der spesifisiteten eskalerer ukontrollert.
De fleste erfarne utviklere holder seg til type-selektorer og klasse-selektorer som hovedverktøy. Klasser gir nok spesifisitet til å treffe presist uten å låse deg fast. ID-selektorer reserveres til JavaScript eller ankertagger, ikke styling. Denne tilnærmingen holder spesifisiteten flat og forutsigbar gjennom hele stilarket.
Neste steg
Spesifisitet i CSS er nært knyttet til hvordan CSS-selektorer fungerer. Jo bedre du forstår selektorer, desto lettere er det å forutsi hvilken regel som vinner. Vil du også forstå hvordan egenskaper flyter nedover i HTML-strukturen, forklarer artikkelen om arv i CSS den mekanismen i detalj.
Denne artikkelen bygger på en videoleksjon fra kurset CSS - komplett guide på Utdannet.no. I kurset lærer du å skrive selektorer med riktig spesifisitet, feilsøke CSS-konflikter med DevTools, og organisere stilark som skalerer uten at du mister kontrollen.
