Čo je špecifickosť v CSS?

Špecifickosť v CSS je mechanizmus, ktorý určuje, aké pravidlo štýlu bude aplikované na prvok, ak je na tento prvok aplikovaných niekoľko pravidiel.

Každý selektor má svoj bod špecifickosti. Vyšší bod znamená vyššiu prioritu.

Výpočet špecifickosti je založený na počte nasledujúcich zložiek v selektore (v zostupnom poradí významnosti):

• Stovky (1000): Pravidlá s !important (majú najvyššiu prioritu, ale ich používanie sa neodporúča).
• Stovky (100): Inline štýly (napísané priamo v atribúte style HTML prvku).
• Stovky (100): Identifikátory (selektory podľa id, napríklad #my-element).
• Desiatky (10): Triedy (selektory podľa .class), pseudo-triedy (napríklad :hover, :focus), atribúty (napríklad [type="text"]).
• Jednotky (1): Typy prvkov (názvy HTML tagov, napríklad div, p), pseudo-prvky (napríklad ::before, ::after).
• Nula (0): Univerzálny selektor (*), kombinátory (> , +, ~), rodičovský selektor (:not(), :is(), :where()) nepridávajú špecifickosť samy o sebe, ale môžu ovplyvniť špecifickosť vnútri zátvoriek.

Príklad výpočtu:

• p { ... } - Špecifickosť: 0-0-0-1
• .my-class { ... } - Špecifickosť: 0-0-1-0
• #my-id { ... } - Špecifickosť: 0-1-0-0
• div.my-class { ... } - Špecifickosť: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Špecifickosť: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Ak majú dve pravidlá rovnakú špecifickosť, platí pravidlo, ktoré je nižšie v CSS súbore.

Príklad:

/* Súbor style.css */
.my-element {
  color: blue; /* Špecifickosť: 0-0-1-0 */
}

#element-id {
  color: red; /* Špecifickosť: 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* Špecifickosť: 0-0-1-0, prepíše predchádzajúce pravidlo s rovnakou špecifickosťou */
}

V tomto prípade bude text prvku s id element-id červený, zatiaľ čo text prvku s triedou my-element bude modrý a tučný (modrá sa prepíše červenou pre prvok s oboma selektormi kvôli vyššej špecifickosti #element-id).

Pochopenie špecifickosti je dôležité pre písanie predvídateľného a ľahko udržiavateľného CSS. Vyhýbajte sa nadmerne zložitej špecifickosti a používaniu !important pre lepšiu správu štýlov.