Mis on spetsiifilis CSS-is?

CSS-i spetsiifilisus on mehhanism, mis määrab, milline stiilireegel rakendub elemendile, kui sellele kehtivad mitu reeglit.

Igal selektoril on oma spetsiifilisuse punkt. Kõrgem punkt tähendab kõrgemat prioriteeti.

Spetsiifilisuse arvutamine põhineb järgmiste komponentide arvul selektoris (vähenemise järjekorras):

• Sajad (1000): reeglid !important-ga (neil on kõrgeim prioriteet, kuid nende kasutamine ei soovitata).
• Sajad (100): inline-stiilid (kirjutatud otse HTML-i style atribuudis).
• Sajad (100): identifikaatorid (selektorid id-ga, näiteks #my-element).
• Kümned (10): klassid (selektorid .class), псевдoklassid (näiteks :hover, :focus), atribuudid (näiteks [type="text"]).
• Ühed (1): elementtüübid (HTML-tägid, näiteks div, p), псевdoelemendid (näiteks ::before, ::after).
• Null (0): universaalne selektor (*), kombinatorid (>, +, ~), vanema selektor (:not(), :is(), :where()) ei lisa spetsiifilisust ise, kuid võivad mõjutada spetsiifilisust sulgudes.

Näide arvutamiseks:

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

Kui kaks reeglit on sama spetsiifilisusega, rakendub see, mis asub CSS-faili lõpus.

Näide:

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

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

.my-element {
  font-weight: bold; /* Spetsiifilisus: 0-0-1-0, üle kirjutab eelneva reegli sama spetsiifilisusega */
}

Selles olukorras on element-id ID-ga määratletud elemendi tekst punane, samas kui my-element klassiga määratletud teksti värv on sinine ja paks (sinine üle kirjutab punase, kuna selle spetsiifilisus on kõrgem #element-id).

Spetsiifilisuse mõistmine on oluline, et kirjutada ennustatavat ja hõlpsasti hooldatavat CSS-i. Vältige liiga keerulise spetsiifilisuse kasutamist ja kasutage !important parema stiilide haldamise jaoks.