Vysvětlete, jak prohlížeč určuje, na které prvky se aplikují styly CSS.

Prohlížeč analyzuje HTML strom a CSS pravidla, poté vytváří renderovací strom (render tree), který spojuje prvky DOM s odpovídajícími styly CSS.

Proces určování stylů zahrnuje několik kroků:

1. Parsování HTML a CSS: Prohlížeč parsuje HTML dokument a vytváří DOM strom. Současně se parsují CSS styly (z <style> tagů, <link> tagů nebo inline stylů), čímž vzniká CSSOM strom (CSS Object Model).

2. Přiřazení selektorů: Prohlížeč prochází DOM strom a pro každý uzel v DOM hledá odpovídající pravidla v CSSOM. Přiřazení probíhá zprava doleva. Například pro selektor .parent .child prohlížeč nejdříve hledá prvky s třídou child, poté kontroluje, zda mají rodiče s třídou parent. Tento přístup umožňuje rychle vyloučit velké podstromy, které neodpovídají selektoru.

3. Kaskádování: Když je pro stejný prvek nalezeno několik pravidel, prohlížeč aplikuje pravidla kaskády. Kaskáda určuje pořadí použití stylů na základě:

   • zdroje stylů (autorovy styly, uživatelské styly, styly prohlížeče)
   • specifikace selektorů
   • pořadí pravidel
   • použití !important

   Příklad specifikace:

   Typ selektoru	Body
   Inline styly	1000
   ID selektory	100
   Třídy, atributy	10
   Tagy, pseudo-elementy	1
   Univerzální (*)	0

   Čím specifičtější je selektor, tím má vyšší prioritu.

4. Dědění: Některé vlastnosti CSS se dědí od rodičovských prvků na potomky (například font-size, color). Prohlížeč to zohledňuje při použití stylů.

5. Vytvoření renderovacího stromu: Na základě DOM stromu a použitých stylů se vytváří renderovací strom (nebo layout tree). Obsahuje pouze viditelné prvky a jejich styly, které jsou potřebné pro rozložení a vykreslení.

   // Příklad: prvek s několika CSS pravidly
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specifičnost: 1 */
     color: blue;
   }
   
   .text {  /* Specifičnost: 10 */
     color: red; /* Tato barva se aplikuje, protože je specifičtější */
     font-size: 16px;
   }
   
   p.text { /* Specifičnost: 11 */
      font-weight: bold; /* Tato vlastnost se aplikuje */
   }
   
   /* Pořadí je také důležité pro selektory se stejnou specifikací */
   div { color: green; }
   div { color: yellow; } /* Tato se aplikuje žlutá */
   

Tímto způsobem prohlížeč prochází kroky parsování, přiřazení, kaskádování a dědění, aby určil konečný soubor stylů pro každý prvek před vytvořením renderovacího stromu a následným vykreslením.