Vysvetlite, ako prehliadač určuje, na ktoré prvky sa majú aplikovať štýly CSS.

Prehliadač určuje, na ktoré prvky bude aplikovať CSS štýly, pomocou mechanizmov vyhľadávania a zhodovania založených na CSS selektoroch.

Proces prebieha nasledovne:

1. Parsovanie CSS: Prehliadač parsuje CSS súbory a bloky <style> v HTML, vytvárajúce vnútorné zobrazenie štýlov.
2. Parsovanie HTML: Prehliadač parsuje HTML, vytvárajúce DOM (Document Object Model) strom.
3. Zhodovanie (Matching): Pre každý uzol v DOM sa prehliadač snaží zhodovať ho s pravidlami CSS. Toto sa robí kontrolou selektorov v CSS pravidlách. Zvyčajne sa pracuje od najšpecifickejšej časti selektora k menej špecifickej (zľava doprava). Napríklad, pre selektor div article p, najskôr nájde p, potom overí, či je potomkom article, ktorý je zase potomkom div.
4. Aplikácia (Applying): Ak uzol DOM zodpovedá jednému alebo viacerým CSS pravidlám, prehliadač aplikuje príslušné štýly na tento uzol. V prípade viacerých platných pravidiel prehliadač určuje konečný súbor štýlov pomocou pravidiel špecifickosti, poradia vyhlásení a dedičnosti.

Špecifickosť (Specificity):

Špecifickosť je algoritmus, ktorý prehliadač používa na výpočet váhy CSS selektora. Vyššia špecifickosť má prioritu pri aplikácii štýlov. Špecifickosť sa počíta na základe počtu ID, tried/pseudo-tried/atribútov a elementov/pseudo-elementov v selektore.

// Výpočet špecifickosti: (a, b, c)
// a = počet ID
// b = počet tried, pseudo-tried, atribútov
// c = počet elementov, pseudo-elementov
// Štýly inline majú najvyššiu prioritu (1, 0, 0, 0)
// Selektor `*` má špecifickosť (0, 0, 0)

Príklad výpočtu špecifickosti:

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

Poradie vyhlásení:

Ak majú dve pravidlá rovnakú špecifickosť, aplikuje sa to, ktoré bolo vyhlásené neskôr v CSS kóde.

Dedičstvo (Inheritance):

Niektoré CSS vlastnosti sa dedičia od rodičovských prvkov k deťom (napríklad color, font-family). Ak pre vlastnosť nie je explicitne nastavená hodnota na prvku, prehliadač hľadá dedičnú hodnotu vyššie v DOM strome.

Týmto spôsobom prehliadač určuje štýly pre prvok pomocou zhodovania selektorov, riešenia konfliktov pomocou špecifickosti a poradia vyhlásení, ako aj zohľadňovania dedičnosti.