Ce este specificitatea în CSS?

Specificitatea în CSS este un mecanism care determină regula de stil care va fi aplicată unui element dacă mai multe reguli se aplică.

Fiecare selector are propriul său scor de specificitate. Un scor mai mare indică o prioritate mai mare.

Calculul specificității se bazează pe numărul componentelor următoare din selector (de la cea mai mare la cea mai mică importanță):

• Sute (1000): Reguli cu !important (au cea mai mare prioritate, dar utilizarea lor nu este recomandată).
• Sute (100): Stiluri inline (scrise direct în atributul style al elementului HTML).
• Sute (100): Identificatori (selectori după id, de exemplu #elementul-meu).
• Zeci (10): Clase (selectori după .clasa), pseudoclasă (de exemplu :hover, :focus), atribute (de exemplu [type="text"]).
• Unu (1): Tipuri de elemente (numele tag-urilor HTML, de exemplu div, p), pseudoelemente (de exemplu ::before, ::after).
• Zero (0): Selector universal (*), combinatori (>, +, ~), selectori părinte (:not(), :is(), :where()) nu adaugă specificitate în sine, dar pot influența specificitatea în interiorul parantezelor.

Exemplu de calcul:

• p { ... } - Specificitate: 0-0-0-1
• .clasa-mea { ... } - Specificitate: 0-0-1-0
• #id-ul-meu { ... } - Specificitate: 0-1-0-0
• div.clasa-mea { ... } - Specificitate: 0-0-1-1
• ul > li.clasa[data-id="1"] { ... } - Specificitate: 0-0-2-2 (li, ul = 2; .clasa, [data-id="1"] = 2)

Dacă două reguli au aceeași specificitate, se aplică regula care se află mai jos în fișierul CSS.

Exemplu:

/* Fișierul style.css */
.elementul-meu {
  culoare: albastru; /* Specificitate: 0-0-1-0 */
}

#id-ul-elementului {
  culoare: roșu; /* Specificitate: 0-1-0-0 */
}

.elementul-meu {
  font-weight: bold; /* Specificitate: 0-0-1-0, suprascrie regula anterioară cu aceeași specificitate */
}

În acest caz, textul elementului cu id-ul id-ul-elementului va fi roșu, iar textul elementului cu clasa elementul-meu va fi albastru și îngroșat (albastru fiind suprascris de roșu datorită specificității mai mari a #id-ul-elementului).

Înțelegerea specificității este importantă pentru a scrie CSS previzibil și ușor de întreținut. Evitați specificitatea excesiv de complexă și utilizarea !important pentru o gestionare mai bună a stilurilor.