Vysvětlete, jak prohlížeč určuje, na které prvky je třeba aplikovat styly CSS.

Prohlížeč určuje, které prvky mají být ovlivněny styly CSS, pomocí mechanismů vyhledávání a shody založených na CSS selektorech.

Proces probíhá následovně:

1. Analýza CSS: Prohlížeč analyzuje CSS soubory a bloky <style> v HTML a vytváří interní reprezentaci stylů.
2. Analýza HTML: Prohlížeč analyzuje HTML a vytváří strom DOM (Document Object Model).
3. Shoda (Matching): Pro každý uzel ve stromu DOM se prohledává, zda odpovídá pravidlům CSS. To se provádí kontrolou selektorů v pravidlech CSS. Obvykle prohlížeč pracuje od specifikovanějších částí selektoru k méně specifickým (zprava doleva). Například pro selektor div article p nejprve najde p, pak zkontroluje, zda je potomkem article, který je zase potomkem div.
4. Použití (Applying): Pokud uzel DOM odpovídá jednomu nebo více pravidlům CSS, prohlížeč aplikuje odpovídající styly na tento uzel. Pokud je více pravidel, určuje prohlížeč konečný soubor stylů podle pravidel specifikace, pořadí deklarací a dědičnosti.

Specifičnost (Specificity):

Specifičnost je algoritmus, který prohlížeč používá k výpočtu váhy CSS selektoru. Čím je selektor specifičtější, tím má vyšší prioritu při aplikaci stylů. Specifičnost se počítá na základě počtu ID, tříd/pseudotříd/atributů a elementů/pseudoelementů v selektoru.

// a = počet ID
// b = počet tříd, pseudotříd, atributů
// c = počet elementů, pseudoelementů
// Inline styly mají nejvyšší prioritu (1, 0, 0, 0)
// Selektor `*` má specifitu (0, 0, 0)

Příklad výpočtu specificity:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Pořadí deklarací:

Pokud mají dvě pravidla stejnou specifitu, platí to, které bylo deklarováno jako poslední v CSS kódu.

Dědičnost (Inheritance):

Některé vlastnosti CSS se dědí od rodičovských prvků na prvky potomků (například color, font-family). Pokud není vlastnost explicitně nastavena na prvku, prohlížeč hledá děděnou hodnotu výše v stromu DOM.

Tímto způsobem prohlížeč určuje styly prvku porovnáním selektorů, řešením konfliktů pomocí specifity a pořadí deklarací, a také zohledněním dědičnosti.