Šta znate o specifičnosti CSS selektora?

Specifičnost određuje prioritet CSS pravila u slučaju konflikta, kada se na jedan element primenjuju različiti stilovi. Ona se izračunava za svaki selektor u pravilu.

Specifičnost je numerička ocena sastavljena od četiri kategorije (A, B, C, D), zapisane kao 0,0,0,0. Što je veći broj, to je specifičnost viša.

Kategorije:

• A (inline stil): Stilovi zadati atributom style u HTML elementu. Imaju najvišu specifičnost (npr. 1,0,0,0).
• B (ID): Selektori po ID-u (npr. #my-id). Povećavaju drugu cifru (npr. 0,1,0,0).
• C (Klasa, atribut, pseudo-klasa): Selektori po klasi (npr. .my-class), atributu (npr. [type="text"]), pseudo-klasi (npr. :hover, :first-child). Povećavaju treću cifru (npr. 0,0,1,0).
• D (Element, pseudo-element): Selektori po HTML tagu (npr. div, p) i pseudo-elementima (npr. ::before, ::after). Povećavaju četvrtu cifru (npr. 0,0,0,1).

Primer izračuna:

• p - 0,0,0,1
• .my-class - 0,0,1,0
• #my-id - 0,1,0,0
• div p - 0,0,0,2 (zbir specifičnosti dva taga)
• #my-id .my-class - 0,1,1,0 (zbir specifičnosti ID-a i klase)
• div#my-id.my-class:hover - 0,1,2,1 (zbir specifičnosti taga, ID-a, klase i pseudo-klase)

Pravila:

1. Specifičnost inline style uvek je viša od bilo koje kombinacije drugih selektora, osim pravila sa oznakom !important.
2. Pravila sa oznakom !important imaju najviši prioritet, preklapajući čak i inline style. Korišćenje !important se ne preporučuje zbog otežane dijagnostike.
3. Pri istoj specifičnosti, primenjuje se pravilo koje je poslednje deklarisano u CSS fajlu.
4. Univerzalni selektor (*) i pseudo-klasa :where() imaju specifičnost 0,0,0,0 i ne povećavaju ukupnu specifičnost.

/*
  Specifičnost: 0,0,0,1
  Primeniće se ako nema specifičnijih pravila
*/
p {
  color: blue;
}

/*
  Specifičnost: 0,0,1,0
  Prekida pravilo za tag p
*/
.text {
  color: green;
}

/*
  Specifičnost: 0,1,0,0
  Prekida pravilo za klasu .text
*/
#main-text {
  color: red;
}

/*
  Specifičnost: 1,0,0,0
  Biće primenjeno ako element ima atribut style="color: purple;"
*/
/* <p style="color: purple;">Tekst</p> */

/*
  Veoma visoka specifičnost, preći će sve
  Ne preporučuje se koristiti bez krajnje nužde
*/
.override-text {
  color: black !important;
}