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

Prehliadač analyzuje HTML strom a CSS pravidlá, potom vytvára strom vykreslenia (render tree), ktorý spája prvky DOM s príslušnými štýlmi CSS.

Proces určovania štýlov zahŕňa niekoľko krokov:

1. Parsovanie HTML a CSS: Prehliadač parsuje HTML dokument a vytvára DOM strom. Súčasne sa parsujú CSS štýly (z <style> tagov, <link> tagov alebo inline štýlov), čím vzniká CSSOM strom (CSS Object Model).

2. Zladenie selektorov: Prehliadač prechádza DOM strom a pre každý uzol v DOM hľadá zodpovedajúce pravidlá v CSSOM. Zladenie prebieha sprava doľava. Napríklad, pre selektor .parent .child prehliadač najskôr hľadá prvky s triedou child, potom kontroluje, či majú rodiča s triedou parent. Tento prístup umožňuje rýchlo vylúčiť veľké podstromy, ktoré nevyhovujú selektoru.

3. Kaskádovanie: Keď je pre ten istý prvok nájdených niekoľko pravidiel, prehliadač aplikuje pravidlá kaskády. Kaskáda určuje poradie použitia štýlov na základe:

   • zdroja štýlov (autorove štýly, používateľské štýly, štýly prehliadača)
   • špecifickosti selektorov
   • poradia pravidiel
   • použitia !important

   Príklad špecifikácie:

   Typ selektora	Body
   Inline štýly	1000
   ID selektory	100
   Triedy, atribúty	10
   Tagy, pseudo-elementy	1
   Univerzálny (*)	0

   Čím špecifickejšie sú selektory, tým majú vyššiu prioritu.

4. Dedičstvo: Niektoré CSS vlastnosti sa dedí od rodičovských prvkov na potomkov (napríklad, font-size, color). Prehliadač to zohľadňuje pri použití štýlov.

5. Vytvorenie renderovacieho stromu: Na základe DOM stromu a použitých CSS štýlov sa vytvára strom pre vykreslenie (alebo layout tree). Obsahuje iba viditeľné prvky a ich štýly, ktoré sú potrebné pre rozloženie a vykreslenie.

   // Príklad: prvok s viacerými pravidlami CSS
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Špecifickosť: 1 */
     color: blue;
   }
   
   .text {  /* Špecifickosť: 10 */
     color: red; /* Táto farba sa aplikuje, pretože je špecifickejšia */
     font-size: 16px;
   }
   
   p.text { /* Špecifickosť: 11 */
      font-weight: bold; /* Táto vlastnosť sa aplikuje */
   }
   
   /* Poradie je tiež dôležité pre selektory s rovnakou špecifickosťou */
   div { color: green; }
   div { color: yellow; } /* Aplikuje sa žltá farba */
   

Týmto spôsobom prehliadač prechádza kroky parsovania, zladenia, kaskádovania a dedenia, aby určil konečný súbor štýlov pre každý prvok pred vytvorením stromu pre vykreslenie a jeho následným zobrazením.