Šta je specifičnost u CSS-u?

Specifičnost u CSS-u je mehanizam koji određuje koji će stil pravilo biti primenjeno na elementu ako je na njega primenjeno više pravila.

Svaki selektor ima svoj sopstveni skor za specifičnost. Viši skor označava viši prioritet.

Izračunavanje specifičnosti zasniva se na broju sledećih komponenti u selektoru (od najvažnije do manje važne):

• Stotina (1000): Pravila sa !important (imaju najviši prioritet, ali njihova upotreba se ne preporučuje).
• Stotine (100): Inline stilovi (napišu direktno u atribut style HTML elementa).
• Stotine (100): Identifikatori (selektori po id, na primer #moj-element).
• Desetice (10): Klase (selektori po .klasa), pseudoklase (na primer :hover, :focus), atributi (na primer [type="text"]).
• Jednice (1): Tipovi elemenata (imena HTML tagova, na primer div, p), pseudoelementi (na primer ::before, ::after).
• Nula (0): Univerzalni selektor (*), spojnice (>, +, ~), roditeljski selektori (:not(), :is(), :where()) sami po sebi ne dodaju specifičnost, ali mogu uticati na nju unutar zagrada.

Primer izračuna:

• p { ... } - Specifičnost: 0-0-0-1
• .moj-klasa { ... } - Specifičnost: 0-0-1-0
• #moj-id { ... } - Specifičnost: 0-1-0-0
• div.moj-klasa { ... } - Specifičnost: 0-0-1-1
• ul > li.klasa[data-id="1"] { ... } - Specifičnost: 0-0-2-2 (li, ul = 2; .klasa, [data-id="1"] = 2)

Ako dva pravila imaju istu specifičnost, primenjuje se ono koje je niže u CSS fajlu.

Primer:

/* fajl style.css */
.moj-element {
  boja: plava; /* Specifičnost: 0-0-1-0 */
}

#element-id {
  boja: crvena; /* Specifičnost: 0-1-0-0 */
}

.moj-element {
  font-weight: bold; /* Specifičnost: 0-0-1-0, prepisuje prethodno pravilo sa istom specifičnošću */
}

U ovom slučaju, tekst elementa sa ID-jem element-id biće crven, a tekst elementa sa klasom moj-element biće plav i podebljan (plavo se prepisuje crvenim zbog veće specifičnosti #element-id).

Razumevanje specifičnosti je važno za pisanje predvidivog i lako održivog CSS-a. Izbegavajte preterano složenu specifičnost i korišćenje !important za bolju kontrolu stilova.