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.
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:
1000 for style-attributten100 for hver id10 for hver attribut, klasse og pseudo-class1 for hvert element og pseudo-elementI et eksempel som:
body #container .navigation a:visited {...}vil specificity'en være:
100 (#container) + 10 (.navigation) + 10 (:visited) + 1 (body) + 1 (a) = 122| Eksempel | Udregning | Specificity |
|---|---|---|
* {...} | 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-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. 
