Čo znamená pojem 'kaskáda' v CSS?

Kaskáda v CSS určuje, ktorý zo konfliktujúcich štýlov má byť aplikovaný na prvok. Je založená na troch hlavných kritériách:

1. Dôležitosť: Štýly s !important majú najvyššiu prioritu.
2. Špecifickosť: Špecifickejšie selektory prepíšu menej špecifické. Špecifickosť sa počíta na základe počtu ID, tried/pseudo-tried/pseudo-atribútových selektorov a tagov/pseudo-elemntov v selektore.
3. Poradie v zdrojovom kóde: Pri rovnakom významnosti a špecifickosti sa aplikuje pravidlo, ktoré bolo deklarované posledné.

Okrem týchto troch, sa zohľadňujú aj ďalšie faktory:

• Zdroj štýlu: Štýly používateľa (v nastaveniach prehliadača), štýly autora (externé a interné štýly, inline štýly), predvolené štýly prehliadača.
• Dedičstvo: Niektoré vlastnosti sa dedičia od rodičovských prvkov na deti.

Príklad špecifickosti:

/* Špecifickosť: 0-1-0 */
.moja-trieda {
  farba: modrá;
}

/* Špecifickosť: 1-0-0 */
#môj-atribút {
  farba: červená;
}

V tomto prípade bude mať prvok s ID môj-atribút a triedou moja-trieda červenú farbu textu, pretože ID #môj-atribút má vyššiu špecifickosť ako .moja-trieda.