Povedz mi o špecifickosti CSS selektorov. Ako sa počíta? Ktorý je najšpecifickejší selektor?

Špecifickosť CSS selektora je číselná hodnota, ktorá určuje prioritu použitia štýlov, keď viaceré pravidlá sú v konflikte.

Ako sa počíta špecifickosť

Špecifickosť sa zvyčajne predstavuje ako štvormiestne číslo (a,b,c,d):

• a — ak je štýl nastavený cez inline štýl (napríklad style=""), potom a=1, inak 0
• b — počet ID selektorov v selektore
• c — počet tried, pseudotried a atribútových selektorov
• d — počet tagov a pseudoelementov

Príklad: selektor #menu .item > a:hover

• ID selektor: #menu → b=1
• Trieda .item a pseudotried :hover → c=2
• Tag a → d=1
• Žiadny inline štýl → a=0

Špecifickosť: (0,1,2,1)

Najšpecifickejší selektor

Najšpecifickejší je inline štýl (a=1), ktorý má vždy prioritu pred akýmkoľvek CSS selektorom.

Porovnávaním selektorov bez inline štýlov, selektor s väčším počtom ID selektorov má vyššiu prioritu.

Zhrnutie

Špecifickosť pomáha prehliadaču určiť, ktoré CSS pravidlo použiť, ak viac pravidiel platí pre ten istý prvok. Čím vyššia je špecifickosť, tým väčšiu prioritu má.