Selgitage, kuidas brauser määrab, millistele elementidele rakenduvad CSS-stiilid.

Brauser analüüsib HTML-puu ja CSS-reegleid ning seejärel loob renderdamise puu (render tree), mis ühendab DOM-elemente vastavate CSS- stiilidega.

Stiilide määramise protsess hõlmab mitmeid samme:

1. HTML ja CSS-i parseldamine: Brauser parseldab HTML-dokumenti ja loob DOM-puu. Samal ajal parseldatakse CSS-stiile (kõige <style>-tägist, <link>-tägist või inline- stiilidest), mille tulemusena tekib CSSOM-puu (CSS Object Model).

2. Valijate sobitamine: Brauser läbib DOM-puu ja otsib iga DOM-juure jaoks CSSOM-is vastavaid reegleid. Sobitamine toimub paremal vasakule. Näiteks selektor .parent .child otsib esmalt elemente klassiga child, seejärel kontrollib, kas neil on vanem klassiga parent. See lähenemine võimaldab kiiresti kõrvaldada suured alampuud, mis ei vasta selektorile.

3. Kaskaadimine: Kui ühe ja sama elemendi jaoks leitakse mitu reeglit, rakendab brauser kaskaadireegleid. Kaskaad määrab stiilide rakendamise järjekorra, lähtudes:

   • stiilide allikast (autor, kasutaja, brauser)
   • selektorite spetsiifikast
   • reeglite järjekorrast
   • kasutusest !important

   Näide selektorite spetsiifikast:

   Selektori tüüp	punktid
   Inline stiilid	1000
   ID-selektorid	100
   Klassid, atribuudid	10
   Tägid, pseudoelementid	1
   Üldine (*)	0

   Mida spetsiifilisem selektor, seda kõrgem prioriteet.

4. Pärimine: Mõned CSS-omadused päranduvad vanematelt elementidelt lastele (näiteks font-size, color). Brauser võtab seda arvesse stiilide rakendamisel.

5. Renderdamise puu loomine: DOM-puu ja rakendatud CSS-stiilide põhjal luuakse renderdamise (või layout) puu. See sisaldab ainult nähtavaid elemente ja nende stiile, mis on vajalikud paigutuse ja joonistamise jaoks.

   // Näide: element, millel on mitu CSS-reeglit
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Spetsiifilisus: 1 */
     color: blue;
   }
   
   .text {  /* Spetsiifilisus: 10 */
     color: red; /* Selle värvi rakendamine, kuna see on spetsiifilisem */
     font-size: 16px;
   }
   
   p.text { /* Spetsiifilisus: 11 */
      font-weight: bold; /* Selle omaduse rakendamine */
   }
   
   /* Järjekord on samuti oluline, kui selektorid on sama spetsiifikaga */
   div { color: green; }
   div { color: yellow; } /* Rakendub kollane värv */
   

Seega läbib brauser parsingu, sobitamise, kaskaadimise ja pärimise etapid, et määrata iga elemendi lõplikud stiilid enne renderdamise puu loomist ja selle kuvamist.