Wat weet je over de specificiteit van CSS-selectors…

Specifiteit bepaalt de prioriteit van CSS-regels in geval van conflicten, wanneer verschillende stijlen op hetzelfde element worden toegepast. Het wordt berekend voor elke selector in de regel.

De specificiteit is een numerieke beoordeling bestaande uit vier categorieën (A, B, C, D), geschreven als 0,0,0,0. Hoe hoger het getal, hoe hoger de specificiteit.

Categorieën:

A (inline stijl): Stijlen gedefinieerd door het style-attribuut in het HTML-element. Ze hebben de hoogste specificiteit (bijvoorbeeld, 1,0,0,0).
B (ID): Selectors op basis van ID (bijvoorbeeld, #mijn-id). Verhogen de tweede cijfer (bijvoorbeeld, 0,1,0,0).
C (Klas, Attribuut, Pseudo-klasse): Selectors op basis van klasse (bijvoorbeeld, .mijn-klasse), attribuut (bijvoorbeeld, [type="text"]), pseudo-klasse (bijvoorbeeld, :hover, :first-child). Verhogen de derde cijfer (bijvoorbeeld, 0,0,1,0).
D (Element, Pseudo-element): Selectors op basis van HTML-tag (bijvoorbeeld, div, p) en pseudo-elementen (bijvoorbeeld, ::before, ::after). Verhogen de vierde cijfer (bijvoorbeeld, 0,0,0,1).

Voorbeeld van berekening:

p - 0,0,0,1
.mijn-klasse - 0,0,1,0
#mijn-id - 0,1,0,0
div p - 0,0,0,2 (som van de specificiteiten van twee elementen)
#mijn-id .mijn-klasse - 0,1,1,0 (som van ID en klasse)
div#mijn-id.mijn-klasse:hover - 0,1,2,1 (som van element, ID, klasse en pseudo-klasse)

Regels:

De specificiteit van de inline stijl is altijd hoger dan elke combinatie van andere selectors, behalve regels met de vlag !important.
Regels met de vlag !important hebben de hoogste prioriteit, overschrijven zelfs inline stijlen. Het gebruik van !important wordt niet aanbevolen vanwege de complexiteit bij het debuggen.
Bij gelijke specificiteit wordt de regel die als laatste in de CSS-bestand is gedeclareerd toegepast.
De universele selector (*) en :where() hebben een specificiteit van 0,0,0,0 en verhogen de totale specificiteit niet.

/*
  Specificiteit: 0,0,0,1
  Wordt toegepast als er geen meer specifieke regels zijn
*/
p {
  color: blue;
}

/*
  Specificiteit: 0,0,1,0
  Overschrijft de regel voor de p-tag
*/
.text {
  color: green;
}

/*
  Specificiteit: 0,1,0,0
  Overschrijft de regel voor de klasse .text
*/
#hoofd-tekst {
  color: red;
}

/*
  Specificiteit: 1,0,0,0
  Wordt toegepast als het element de stijl-attribute `style="color: purple;"` heeft
*/
/* <p style="color: purple;">Tekst</p> */

/*
  Zeer hoge specificiteit, overschrijft alles
  Het gebruik wordt niet aanbevolen tenzij absoluut noodzakelijk
*/
.override-text {
  color: black !important;
}

Wat weet je over de specificiteit van CSS-selectors?