Ako fungujú rôzne priority štýlov v CSS?

V CSS-u sa priorita štýlov určujú mechanizmus kaskádovania a špecifickosť selektorov. Základné princípy sú:

1. Špecifickosť — je váha selektora, ktorá sa počíta na základe počtu ID, tried, tagov a ďalších komponentov. Čím vyššia je špecifickosť, tým väčšiu prioritu má štýl.

   • ID selektor (#id) má vysokú prioritu.
   • Triedy (.trieda), atribúty a pseudotriedy majú strednú prioritu.
   • Tagy (div, p) majú nízku prioritu.

2. Kaskádovanie — ak majú dve pravidlá rovnakú špecifickosť, aplikuje sa to, ktoré je deklarované neskôr v kóde.

3. !important — pridáva maximálnu prioritu štýlu, prepísaním iných pravidiel, okrem iných !important s vyššou špecifickosťou.

4. Dedičstvo — niektoré vlastnosti (color, font-family) sa dedičia od rodiča, ak nie sú prepísané.

Príklad:

#header { color: red; }       /* špecifickosť 100 */
.menu { color: blue; }        /* špecifickosť 10  */
div { color: green; }         /* špecifickosť 1   */

/* Ak má prvok id="header" a triedu="menu", farba bude červená */

Takto prehliadač vyberá štýl s najvyššou špecifickosťou, pričom zohľadňuje poradie a prítomnosť !important.