Magyarázza el, hogyan határozza meg a böngésző, hogy mely elemekre kell alkalmazni a CSS-stílusokat.

A böngésző meghatározza, hogy mely elemekre alkalmazza a CSS-stílusokat, keresési és egyeztetési mechanizmusokat használva a CSS-szabályok alapján.

A folyamat a következőképpen történik:

1. CSS elemzése: A böngésző elemzi a CSS-fájlokat és a HTML-ben található <style> blokkokat, és belső reprezentációt hoz létre a stílusokról.
2. HTML elemzése: A böngésző elemzi a HTML-t, és létrehozza a DOM (Document Object Model) fát.
3. Egyeztetés: Minden DOM csomópont esetében a böngésző megpróbálja összepárosítani a CSS szabályokkal. Ez a szabályokban található szelektorok ellenőrzésével történik. Általában a böngésző a szelektorokban szereplő specifikusabb részekről a kevésbé specifikusabb részek felé halad (jobbról balra). Például a div article p szelektor esetében először megtalálja a p-t, majd ellenőrzi, hogy az article leszármazottja-e, amely viszont a div leszármazottja.
4. Alkalmazás: Ha egy DOM csomópont megfelel egy vagy több CSS szabálynak, a böngésző alkalmazza a megfelelő stílusokat erre a csomópontokra. Több szabály esetén a böngésző a specifikusság, a deklarációk sorrendje és az öröklődés szabályait használva határozza meg a végső stílusokat.

Specifikusság:

A specifikusság egy algoritmus, amit a böngésző használ a CSS szelektor súlyának kiszámítására. Egy specifikusabb szelektor prioritást élvez a stílusok alkalmazásakor. A specifikusságot a szelektorban szereplő ID-k, osztályok/pseudoklaszok/attribútumok és elemek/pseudoelemek számának alapján számítják ki.

// a = ID-k száma
// b = osztályok, pseudoklaszok, attribútumok száma
// c = elemek, pseudoelemek száma
// Inline stílusok a legmagasabb prioritással bírnak (1, 0, 0, 0)
// A `*` szelektor specifikussága (0, 0, 0)

Példa a specifikusság számítására:

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

Deklarációk sorrendje:

Ha két szabály ugyanazzal a specifikussággal rendelkezik, az utolsó deklarált szabály érvényesül a CSS-kódban.

Öröklődés:

Néhány CSS-tulajdonság öröklődik a szülő elemtől a gyermek elemek felé (pl. color, font-family). Ha egy tulajdonságnak nincs explicit értéke az elemre vonatkozóan, a böngésző a DOM-fán felfelé keresve próbálja megtalálni az öröklött értéket.

Így a böngésző a szelektorok egyeztetésével, a specifikusság és a deklaráció sorrendjének feloldásával, valamint az öröklődés figyelembevételével határozza meg egy elem stílusait.