Magyarázza el, hogyan határozza meg a böngésző, hogy mely elemekre alkalmazódnak a CSS-stílusok.

A böngésző elemzi a HTML-fát és a CSS-szabályokat, majd létrehozza a renderfát (render tree), amely összekapcsolja a DOM-elemeket a megfelelő CSS-stílusokkal.

A stílusok meghatározásának folyamata több lépésből áll:

1. HTML és CSS elemzése: A böngésző elemzi a HTML-dokumentumot, és létrehozza a DOM-fát. Egyidejűleg elemzi a CSS-stílusokat (a <style>, <link> tagekből vagy inline stílusokból), és létrehozza a CSSOM (CSS Object Model) fát.

2. Szelektorok megfeleltetése: A böngésző végigmegy a DOM-fán, és minden DOM-csomópont esetében megkeresi a megfelelő szabályokat a CSSOM-ban. A megfeleltetés jobbról balra történik. Például a .parent .child szelektor esetében a böngésző először a child osztályú elemeket keresi, majd ellenőrzi, hogy van-e olyan szülő, amelyiknek szintén parent osztálya van. Ez a módszer lehetővé teszi, hogy gyorsan kizárjunk nagy alárendelt fákat, amelyek nem felelnek meg a szelektornak.

3. Kaskádolás: Amikor ugyanarra az elemre több szabály is vonatkozik, a böngésző alkalmazza a kaskádot. A kaskád meghatározza a stílusok alkalmazási sorrendjét az alábbi szempontok szerint:

   • A stílusok forrása (szerzői, felhasználói, böngészői stílusok).
   • A szelektorok specifikussága.
   • A szabályok megjelenési sorrendje.
   • Az !important használata.

   Példa a specifikusságra:

   Szelektor típus	Pontok
   Inline stílusok	1000
   ID szelektorok	100
   Osztályok, attribútumok	10
   Címkék, pseudo-elemek	1
   Univerzális (*)	0

   A legspecifikusabb szelektoroknak van prioritásuk.

4. Öröklődés: Néhány CSS-tulajdonság öröklődik a szülőelemtől a gyermekelemek felé (például font-size, color). A böngésző figyelembe veszi ezt a stílusalkalmazás során.

5. Renderfa építése: A DOM-fa és az alkalmazott CSS-stílusok alapján épül fel a renderfa (vagy layout fa). Ez csak a látható elemeket és azok stílusait tartalmazza, amelyek a elrendezéshez és a megjelenítéshez szükségesek.

   // Példa: egy elem több CSS-szabállyal
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specifikusság: 1 */
     color: blue;
   }
   
   .text {  /* Specifikusság: 10 */
     color: red; /* Ez a szín fog alkalmazódni, mert specifikusabb */
     font-size: 16px;
   }
   
   p.text { /* Specifikusság: 11 */
      font-weight: bold; /* Ez a tulajdonság fog alkalmazódni */
   }
   
   /* A sorrend is fontos ugyanakkora specifikusságú szelektorok esetén */
   div { color: green; }
   div { color: yellow; } /* A sárga szín fog alkalmazódni */
   

Így a böngésző végigmegy az elemzés, megfeleltetés, kaskádolás és öröklődés lépésein, hogy meghatározza az egyes elemek végső stílusait, mielőtt felépítené a renderfát és megjelenítené az oldalt.