Kas yra specifikacija CSS?

Specifiskumas CSS yra mechanizmas, kuris nustato, kuri stiliaus taisyklė bus taikoma elementui, jei taikoma keli taisyklės.

Kiekvienas selektorius turi savo specifiskumo balą. Aukštesnis balas reiškia didesnį prioritetą.

Specifiskumo skaičiavimas grindžiamas šių komponentų skaičiumi selektoriuje (nuo svarbiausio iki mažiau svarbaus):

• Šimtiniai (1000): taisyklės su !important (turintys aukščiausią prioritetą, bet jų naudojimas nerekomenduojamas).
• Šimtiniai (100): inline stiliai (rašyti tiesiogiai HTML elemento style atributu).
• Šimtiniai (100): identifikatoriai (selektoriai pagal id, pvz., #my-element).
• Dešimtukai (10): klasės (selektoriai pagal .class), pseudo-klasės (pvz., :hover, :focus), atributai (pvz., [type="text"]).
• Vienetai (1): elementų tipai (HTML žymų pavadinimai, pvz., div, p), pseudo-elementai (pvz., ::before, ::after).
• Nulis (0): universalus selektorius (*), jungikliai (>, +, ~), tėvo selektorius (:not(), :is(), :where()) patys savaime nesudaro specifiskumo, bet gali turėti įtakos specifiskumui skliaustuose.

Pavyzdys skaičiavimui:

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

Jei du taisyklės turi tą pačią specifiskumą, ta taikoma, kuri yra žemiau CSS faile.

Pavyzdys:

/* style.css failas */
.my-element {
  color: blue; /* Specifiskumas: 0-0-1-0 */
}

#element-id {
  color: red; /* Specifiskumas: 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* Specifiskumas: 0-0-1-0, perrašo ankstesnį taisyklę su tokiu pačiu specifiskumu */
}

Šiuo atveju elemento su ID element-id tekstas bus raudonas, o elemento su klase my-element — mėlynas ir storas (mėlyna perrauna raudoną dėl didesnio specifiskumo #element-id).

Specifiskumo supratimas yra svarbus rašant prognozuojamą ir lengvai prižiūrimą CSS. Venkite pernelyg sudėtingo specifiskumo ir naudokite !important geresniam stilių valdymui.