Leg uit hoe de browser bepaalt op welke elementen CSS-stijlen worden toegepast.

De browser analyseert de HTML-boom en de CSS-regels, en bouwt vervolgens de renderboom (render tree), die de DOM-elementen koppelt aan de bijbehorende CSS-stijlen.

Het proces van het bepalen van stijlen omvat verschillende stappen:

1. HTML- en CSS-parser: De browser parseert het HTML-document en maakt een DOM-boom. Tegelijkertijd parseert het de CSS-stijlen (van <style>-tags, <link>-tags of inline-stijlen) en maakt een CSSOM-boom (CSS Object Model).

2. Selector matching: De browser doorloopt de DOM-boom en zoekt voor elk knooppunt in de DOM de bijbehorende regels in de CSSOM. De matching gebeurt van rechts naar links. Bijvoorbeeld, voor de selector .parent .child, zoekt de browser eerst naar elementen met de klasse child, en controleert vervolgens of ze een ouder hebben met de klasse parent. Deze aanpak maakt het mogelijk om grote subbomen die niet overeenkomen snel uit te sluiten.

3. Cascadering: Wanneer voor hetzelfde element meerdere regels gevonden worden, past de browser de cascade toe. De cascade bepaalt de volgorde van toepassing van stijlen op basis van:

   • De bron van de stijlen (auteursstijlen, gebruikersstijlen, browserstijlen).
   • De specificiteit van de selectors.
   • De volgorde van de regels.
   • Het gebruik van !important.

   Voorbeeld van specificiteit:

   Type selector	Punten
   Inline stijlen	1000
   ID-selectors	100
   Klassen, attributen	10
   Tags, pseudo-elementen	1
   Universeel (*)	0

   Meer specifieke selectors hebben prioriteit.

4. Overerving: Sommige CSS-eigenschappen worden geërfd van ouderlijke elementen naar kindelementen (bijvoorbeeld font-size, color). De browser houdt hier rekening mee bij het toepassen van stijlen.

5. Bouw van de renderboom: Op basis van de DOM-boom en de toegepaste CSS-stijlen wordt de renderboom (of layout tree) opgebouwd. Deze bevat alleen zichtbare elementen en hun stijlen die nodig zijn voor de lay-out en rendering.

   // Voorbeeld: element met meerdere CSS-regels
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specificiteit: 1 */
     color: blue;
   }
   
   .text {  /* Specificiteit: 10 */
     color: red; /* Deze kleur wordt toegepast omdat het specifieker is */
     font-size: 16px;
   }
   
   p.text { /* Specificiteit: 11 */
      font-weight: bold; /* Deze eigenschap wordt toegepast */
   }
   
   /* De volgorde is ook belangrijk voor selectors met dezelfde specificiteit */
   div { color: green; }
   div { color: yellow; } /* Gele kleur wordt toegepast */
   

Op deze manier doorloopt de browser de stappen van parseren, matching, cascade en overerving om de uiteindelijke stijlset voor elk element te bepalen, voordat de renderboom wordt opgebouwd en de rendering plaatsvindt.