Wat is specificiteit in CSS?

De specificiteit in CSS is een mechanisme dat bepaalt welke stijlregel op een element wordt toegepast als er meerdere regels van toepassing zijn.

Elke selector heeft zijn eigen score voor specificiteit. Een hogere score betekent een hogere prioriteit.

De berekening van specificiteit is gebaseerd op het aantal van de volgende componenten in de selector (aflopend in belangrijkheid):

• Honderdtallen (1000): Regels met !important (hebben de hoogste prioriteit, maar het gebruik ervan wordt niet aanbevolen).
• Honderdtallen (100): Inline stijlen (geschreven direct in het style-attribuut van het HTML-element).
• Honderdtallen (100): Identificatoren (selectors op id, bijvoorbeeld #mijn-element).
• Tientallen (10): Klassen (selectors op .klasse), pseudoklassen (bijvoorbeeld :hover, :focus), attributen (bijvoorbeeld [type="text"]).
• Enen (1): Elementtypen (HTML-tag namen, bijvoorbeeld div, p), pseudoelementen (bijvoorbeeld ::before, ::after).
• Nul (0): Universele selector (*), combinatoren (>, +, ~), ouderselectoren (:not(), :is(), :where()) voegen op zichzelf geen specificiteit toe, maar kunnen de specificiteit binnen haakjes beïnvloeden.

Voorbeeld van de berekening:

• p { ... } - Specificiteit: 0-0-0-1
• .mijn-klasse { ... } - Specificiteit: 0-0-1-0
• #mijn-id { ... } - Specificiteit: 0-1-0-0
• div.mijn-klasse { ... } - Specificiteit: 0-0-1-1
• ul > li.klasse[data-id="1"] { ... } - Specificiteit: 0-0-2-2 (li, ul = 2; .klasse, [data-id="1"] = 2)

Als twee regels dezelfde specificiteit hebben, wordt de regel die lager in het CSS-bestand staat toegepast.

Voorbeeld:

/* style.css bestand */
.mijn-element {
  kleur: blauw; /* Specificiteit: 0-0-1-0 */
}

#element-id {
  kleur: rood; /* Specificiteit: 0-1-0-0 */
}

.mijn-element {
  font-weight: bold; /* Specificiteit: 0-0-1-0, overschrijft de vorige regel met dezelfde specificiteit */
}

In dit geval wordt de tekst van het element met id element-id rood, en de tekst van het element met klasse mijn-element blauw en vet (blauw wordt overschreven door rood vanwege de hogere specificiteit van #element-id).

Het begrijpen van specificiteit is belangrijk voor het schrijven van voorspelbaar en onderhoudbaar CSS. Vermijd overmatige complexiteit in specificiteit en het gebruik van !important voor een betere beheersing van stijlen.