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

De browser bepaalt welke elementen CSS-stijlen moeten krijgen door zoek- en matching-mechanismen te gebruiken op basis van CSS-selectors.

Het proces verloopt als volgt:

1. CSS parseren: De browser analyseert CSS-bestanden en <style>-blokken in HTML en maakt een interne representatie van de stijlen.
2. HTML parseren: De browser analyseert HTML en maakt de DOM-boom (Document Object Model).
3. Matching: Voor elke knoop in de DOM-boom probeert de browser deze te matchen met CSS-regels. Dit gebeurt door de selectors in de CSS-regels te controleren. Meestal werkt de browser van meer specifieke delen van de selector naar minder specifieke (van rechts naar links). Bijvoorbeeld, voor de selector div article p, vindt hij eerst p, daarna controleert hij of het een descendant is van article, dat op zijn beurt een descendant is van div.
4. Toepassen: Als een DOM-knoop overeenkomt met een of meerdere CSS-regels, past de browser de bijbehorende stijlen toe op die knoop. Bij meerdere toepasbare regels bepaalt de browser de uiteindelijke stijlset door gebruik te maken van specificiteit, volgorde van declaraties en erfelijkheid.

Specificiteit:

Specificiteit is een algoritme dat door de browser wordt gebruikt om het gewicht van een CSS-selector te berekenen. Een meer specifieke selector heeft prioriteit bij het toepassen van stijlen. Specificiteit wordt berekend op basis van het aantal ID's, klassen/pseudoklassen/attributen en elementen/pseudoelementen in de selector.

// a = aantal ID's
// b = aantal klassen, pseudoklassen, attributen
// c = aantal elementen, pseudoelementen
// Inline stijlen hebben de hoogste prioriteit (1, 0, 0, 0)
// De selector `*` heeft specificiteit (0, 0, 0)

Voorbeeld van specificiteitsberekening:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Volgorde van declaraties:

Als twee regels dezelfde specificiteit hebben, wordt de laatste in de CSS-code toegepast.

Erfelijkheid:

Sommige CSS-eigenschappen worden geërfd van ouderlijke elementen naar kindelementen (bijvoorbeeld color, font-family). Als er geen expliciete waarde voor een eigenschap op een element is ingesteld, zoekt de browser naar een geërfde waarde omhoog door de DOM-boom.

Op deze manier bepaalt de browser de stijlen voor een element door selectors te matchen, conflicten op te lossen met behulp van specificiteit en volgorde van declaraties, en rekening te houden met erfelijkheid.