Co znamená pojem 'kaskáda' v CSS?

Kaskád v CSS určuje, který z konfliktních stylů by měl být aplikován na prvek. Je založen na třech hlavních kritériích:

1. Důležitost: Styly s !important mají nejvyšší prioritu.
2. Specifičnost: Specifičtější selektory přepisují méně specifické. Specifičnost se počítá na základě počtu ID, tříd/pseudo-tříd/selectory atributů a tagů/pseudo-elemntů v selektoru.
3. Pořadí v zdrojovém kódu: Pokud jsou důležitost a specififičnost stejné, platí pravidlo, které bylo deklarováno jako poslední.

Kromě těchto tří faktorů se zohledňují i další:

• Zdroj stylu: Styly uživatele (v nastavení prohlížeče), styly autora (vnější a vnitřní styly, inline styly), výchozí styly prohlížeče.
• Dědičnost: Některé vlastnosti jsou děděny od rodičovských prvků na potomky.

Příklad specifity:

/* Specifičnost: 0-1-0 */
.moje-trida {
  barva: modrá;
}

/* Specifičnost: 1-0-0 */
#můj-idd {
  barva: červená;
}

V tomto případě bude mít prvek s ID můj-idd a třídou moje-trida červenou barvu textu, protože ID #můj-idd má vyšší specifitu než .moje-trida.