Css Specificity

Det sker ofte, at et elements egenskaber bliver sat af flere forskellige css-selektorer. F.eks. kan det ske, at farven på en overskrift er sat som sort generelt på alle <h1> (med css’en h1 {color: black;}) og samtidig som grøn på overskrifter med klassen class="green" (med css’en h1.green {color: green;}).

Css specificity er den vægtning, browseren laver, for at afgøre hvilken css-egenskab, der skal være gældende. Den med højest specificity vil altid vinde. Css specificity er kun relevant, når samme element er deklareret af flere selektorer.

I eksemplet med den grønne overskrift er det naturligt for de fleste, at den må være grøn. Men der er mange scenarier, hvor det ikke vil være naturligt. Det er derfor nødvendigt at kende til, hvordan browseren prioriterer.

Sådan beregnes specificity

Specificity kan udregnes som en værdi. Den med højest værdi vil være gældende. Hvis to egenskaber har samme værdi, vil den, der forekommer sidst i css-koden, være gældende.

Specificity beregnes ved at starte udregningen på 0:

  • Tilføj 1000 for style-attributten
  • Tilføj 100 for hver id
  • Tilføj 10 for hver attribut, klasse og pseudo-class
  • Tilføj 1 for hvert element og pseudo-element

I et eksempel som:

body #container .navigation a:visited {...}

vil specificity'en være:

100 (#container) + 10 (.navigation) + 10 (:visited) + 1 (body) + 1 (a) = 122

Specificity-eksempler

EksempelUdregningSpecificity
* {...}0
span {...}1
span a {...}1+1 =2
a:hover {...}1+10 =11
span h1.green {...}1+1+10 =12
h1.green.large {...}1+10+10 =21
#container div h1.green {...}100+1+1+10 =112
<span style="...">1000

!important

!important-selektoren kan benyttes til at overskrive andre selektorer. Undgå så vidt muligt brugen af !important, da det gør css-koden ustruktureret. Det bør aldrig være nødvendigt med !important, hvor udvikleren har fuld kontrol over koden. I andre tilfælde kan det være nødvendigt, hvis der arbejdes i systemer, hvor udvikleren bliver nødt til at overskrive andet css-kode. 
da_DKDansk