Ką žinote apie CSS selektorių specifiką?

Specifiškumas nustato CSS taisyklių prioritetą jų konfliktų atveju, kai vienam elementui taikomi skirtingi stiliai. Ji skaičiuojama kiekvienam selektoriui taisyklėje.

Specifiškumas yra skaitinė įvertinimo reikšmė, sudaryta iš keturių kategorijų (A, B, C, D), užrašyta kaip 0,0,0,0. Kuo didesnis skaičius, tuo aukštesnis specifiškumas.

Kategorijos:

• A (tarpinė stiliaus): Stiliai, nustatyti style atributu HTML elemente. Jie turi aukščiausią specifiškumą (pavyzdžiui, 1,0,0,0).
• B (ID): Selektoriai pagal ID (pavyzdžiui, #my-id). Jie padidina antrą skaitmenį (pavyzdžiui, 0,1,0,0).
• C (Klasė, atributas, pseudo-klasė): Selektoriai pagal klasę (pavyzdžiui, .my-class), atributą (pavyzdžiui, [type="text"]), pseudo-klasę (pavyzdžiui, :hover, :first-child). Jie padidina trečią skaitmenį (pavyzdžiui, 0,0,1,0).
• D (Elementas, pseudo-elementas): Selektoriai pagal HTML žymą (pavyzdžiui, div, p) ir pseudo-elementus (pavyzdžiui, ::before, ::after). Jie padidina ketvirtą skaitmenį (pavyzdžiui, 0,0,0,1).

Pavyzdys skaičiavimui:

• p - 0,0,0,1
• .my-class - 0,0,1,0
• #my-id - 0,1,0,0
• div p - 0,0,0,2 (dviejų žymių suma)
• #my-id .my-class - 0,1,1,0 (ID ir klasių suma)
• div#my-id.my-class:hover - 0,1,2,1 (žymės, ID, klasės ir pseudo-klasės suma)

Taisyklės:

1. inline style specifiškumas visada yra aukštesnis už bet kokią kitų selektorių kombinaciją, išskyrus taisykles su !important žyma.
2. Taisyklės su !important žyma turi aukščiausią prioritetą, perrašydamos net inline stilių. Naudojimas !important nerekomenduojamas dėl sudėtingumo.
3. Esant vienodam specifiškumui, taikoma paskutinė CSS faile deklaruota taisyklė.
4. Universalusis selektorius (*) ir pseudo-klasė :where() turi specifiškumą 0,0,0,0 ir nesikeičia bendrojo specifiškumo.

/*
  Specifiškumas: 0,0,0,1
  Taikoma, jei nėra kitų specifiškesnių taisyklių
*/
p {
  color: blue;
}

/*
  Specifiškumas: 0,0,1,0
  Perrašo `p` žymės taisyklę
*/
.text {
  color: green;
}

/*
  Specifiškumas: 0,1,0,0
  Perrašo `.text` klasės taisyklę
*/
#main-text {
  color: red;
}

/*
  Specifiškumas: 1,0,0,0
  Bus taikoma, jei elementas turi atributą style="color: purple;"
*/
/* <p style="color: purple;">Tekstas</p> */

/*
  Labai aukštas specifiškumas, perrašo viską
  Nerekomenduojama naudoti be būtinybės
*/
.override-text {
  color: black !important;
}