Úvod k úloze

Samotné psaní CSS pravidel je jen začátek. Skutečná síla (a někdy i záludnost) CSS spočívá v tom, že styly se kaskádují – tedy vrství a kombinují podle určité logiky. Pokud dva různé selektory určují pro stejný prvek rozdílný vzhled, musí prohlížeč rozhodnout, který z nich má přednost. Tento proces se nazývá kaskádování a specifikace stylu. Správné porozumění těmto pravidlům je klíčové, jinak se snadno ocitnete v situaci, kdy „styly nefungují“ – přitom fungují, jen jinak, než čekáte.

Teorie a principy

  1. Kaskádování (cascading)

    • Pokud má prvek více stylů, uplatní se poslední platné pravidlo (pokud není ovlivněno specifitou nebo !important).

    • Pořadí načítání souborů a zápisu v kódu má tedy význam.

  2. Specifita (specificity)

    • Určuje „sílu“ selektoru. Čím konkrétnější selektor, tím má vyšší váhu.

    • Zjednodušené pořadí síly:

      • inline styly (nejvyšší, např. style="color:red")

      • ID selektory (#id)

      • třídní, atributové a pseudotřídy (.class, [type=text], :hover)

      • elementy a pseudoelementy (p, h1, ::before)

      • univerzální selektor * (nejnižší)

  3. Pravidlo !important

    • Přepíše všechny ostatní styly, bez ohledu na pořadí a specifitu.

    • Používat jen výjimečně – jinak vzniká chaos.

    • Příklad:

Praktické příklady kódu

Konflikt stylů podle pořadí

Výsledná barva: zelená (poslední pravidlo má přednost).

Konflikt stylů podle specificity

 

Výsledná barva: červená (ID má vyšší váhu než třída i element).

Použití !important

 


Výsledná barva: zelená (přetlačilo !important).

Typické chyby / záludnosti

  • Přehnané používání !important – vede k nepřehlednému a těžko udržovatelnému kódu.

  • Nerozpoznání vlivu specificity – studenti si často myslí, že poslední pravidlo vždy vyhraje, ale ID či inline styl může mít přednost.

  • Zapomenuté pořadí načítání souborů – pokud načtete reset.css po svém style.css, může vám přepsat vlastní styly.

  • Stejná specifita → rozhoduje pořadí v kódu.

Shrnutí

  • Kaskádování = vrstvení pravidel podle pořadí, specificity a !important.

  • Specifita určuje sílu selektoru: inline > ID > class/pseudotřídy > elementy > univerzální selektor.

  • !important přebíjí všechno ostatní, ale má se používat jen výjimečně.

  • Konflikty stylů se řeší pochopením této hierarchie, ne chaotickým přidáváním !important.