Mida teate CSS valijate spetsiifilisusest?

CSS-i reeglite spetsiifilisus määrab nende prioriteet konfliktide korral, kui ühele elemendile rakendatakse erinevaid stiile. See arvutatakse iga selektori jaoks reeglites.

Spetsiifilisus on arvuline hinnang, mis koosneb neljast kategooriast (A, B, C, D), kirjutatud kujul 0,0,0,0. Mida suurem number, seda kõrgem on spetsiifilisus.

Kategooriad:

• A (rida stiil): Stiilid, mis on määratud HTML-elemendi style atribuudiga. Neil on kõrgeim spetsiifilisus (näiteks 1,0,0,0).
• B (ID): ID selektorid (näiteks #my-id). Nad suurendavad teist numbrit (näiteks 0,1,0,0).
• C (Klass, atribuut, pseudo-klass): Klassid (näiteks .my-class), atribuudid (näiteks [type="text"]), pseudo-klassid (näiteks :hover, :first-child). Nad suurendavad kolmandat numbrit (näiteks 0,0,1,0).
• D (Element, pseudo-element): HTML elemendi selektorid (näiteks div, p) ja pseudo-elemendid (näiteks ::before, ::after). Nad suurendavad neljandat numbrit (näiteks 0,0,0,1).

Näide arvutamiseks:

• p - 0,0,0,1
• .my-class - 0,0,1,0
• #my-id - 0,1,0,0
• div p - 0,0,0,2 (kaks elementi kokku)
• #my-id .my-class - 0,1,1,0 (ID ja klasside summa)
• div#my-id.my-class:hover - 0,1,2,1 (element, ID, klass ja pseudo-klasside summa)

Reeglid:

1. inline style spetsiifilisus on alati kõrgem kui mis tahes teise selektori kombinatsioon, välja arvatud !important lipuga reeglid.
2. !important lipuga reeglid omavad kõrgeimat prioriteeti, üle kirjutades isegi inline stiili. Kasutamine !important ei ole soovitatav, kuna see raskendab silumist.
3. Sama spetsiifilisuse korral rakendub viimane CSS-failis deklareeritud reegel.
4. Universaalse selektori (*) ja :where() pseudo-klassil on spetsiifilisus 0,0,0,0 ning need ei suurenda üldist spetsiifilisust.

/*
  Spetsiifilisus: 0,0,0,1
  Rakendub, kui kõrgema spetsiifilisusega reegleid ei ole
*/
p {
  color: blue;
}

/*
  Spetsiifilisus: 0,0,1,0
  Üldistab p-tüüpi reeglit
*/
.text {
  color: green;
}

/*
  Spetsiifilisus: 0,1,0,0
  Üldistab `.text` klassi reeglit
*/
#main-text {
  color: red;
}

/*
  Spetsiifilisus: 1,0,0,0
  Kui element on stiilatribuutidega "color: purple;"
*/
/* <p style="color: purple;">Tekst</p> */

/*
  Väga kõrge spetsiifilisus, üle kõike
  Soovitatav kasutada ainult äärmise vajaduse korral
*/
.override-text {
  color: black !important;
}