Ce știi despre specificitatea selectorilor CSS…

Specificitatea determină prioritatea regulilor CSS în caz de conflict, atunci când stilurile diferite sunt aplicate aceluiași element. Se calculează pentru fiecare selector din regulă.

Specificitatea este o evaluare numerică formată din patru categorii (A, B, C, D), scrisă ca 0,0,0,0. Cu cât numărul este mai mare, cu atât specificitatea este mai mare.

Categorii:

A (stil inline): Stilurile definite prin atributul style în elementul HTML. Au cea mai mare specificitate (de exemplu, 1,0,0,0).
B (ID): Selecții după ID (de exemplu, #id-ul-meu). Crește al doilea cifru (de exemplu, 0,1,0,0).
C (Clasă, Atribut, Pseudo-clasă): Selecții după clasă (de exemplu, .clasa-mea), atribut (de exemplu, [type="text"]), pseudo-clasă (de exemplu, :hover, :first-child). Crește al treilea cifru (de exemplu, 0,0,1,0).
D (Element, Pseudo-element): Selecții după eticheta HTML (de exemplu, div, p) și pseudo-elemente (de exemplu, ::before, ::after). Crește al patrulea cifru (de exemplu, 0,0,0,1).

Exemplu de calcul:

p - 0,0,0,1
.clasa-mea - 0,0,1,0
#id-ul-meu - 0,1,0,0
div p - 0,0,0,2 (suma specificităților celor două elemente)
#id-ul-meu .clasa-mea - 0,1,1,0 (suma ID-ului și clasei)
div#id-ul-meu.clasa-mea:hover - 0,1,2,1 (suma element, ID, clasă și pseudo-clasă)

Reguli:

Specificitatea stilului inline este întotdeauna mai mare decât orice combinație de alți selectori, cu excepția regulilor cu flag-ul !important.
Regulile cu flag-ul !important au prioritatea cea mai mare, suprascriind chiar și stilul inline. Utilizarea !important nu este recomandată din cauza dificultăților de depanare.
În cazul specificităților egale, se aplică regula declarată ultima în fișierul CSS.
Selectorul universal (*) și :where() au specificitatea 0,0,0,0 și nu cresc specificitatea totală.

/*
  Specificitate: 0,0,0,1
  Se aplică dacă nu există reguli mai specifice
*/
p {
  color: blue;
}

/*
  Specificitate: 0,0,1,0
  Va suprascrie regula pentru tag-ul p
*/
.text {
  color: green;
}

/*
  Specificitate: 0,1,0,0
  Va suprascrie regula pentru clasa .text
*/
#text-principal {
  color: red;
}

/*
  Specificitate: 1,0,0,0
  Se aplică dacă elementul are atributul style="color: purple;"
*/
/* <p style="color: purple;">Text</p> */

/*
  Specificitate foarte mare, va suprascrie tot
  Nu este recomandat să fie folosit fără necesitate extremă
*/
.override-text {
  color: black !important;
}

Ce știi despre specificitatea selectorilor CSS?