Spiega come il browser determina su quali elementi applicare gli stili CSS.

Il browser determina quali elementi applicare con gli stili CSS utilizzando meccanismi di ricerca e corrispondenza basati sui selettori CSS.

Il processo avviene come segue:

1. Parsing CSS: Il browser analizza i file CSS e i blocchi <style> in HTML, creando una rappresentazione interna degli stili.
2. Parsing HTML: Il browser analizza l'HTML, creando l'Albero DOM (Document Object Model).
3. Matching: Per ogni nodo nell'Albero DOM, il browser tenta di abbinarlo alle regole CSS. Questo avviene verificando i selettori nelle regole CSS. Di solito, il browser lavora da parti più specifiche del selettore a meno specifiche (da destra a sinistra). Ad esempio, per il selettore div article p, prima trova p, poi verifica se è un discendente di article, che a sua volta è un discendente di div.
4. Applying: Se un nodo DOM corrisponde a una o più regole CSS, il browser applica gli stili corrispondenti a quel nodo. In caso di più regole applicabili, il browser determina il set finale di stili usando regole di specificità, ordine di dichiarazione e ereditarietà.

Specificità:

La specificità è un algoritmo usato dal browser per calcolare il peso di un selettore CSS. Un selettore più specifico ha priorità maggiore nell'applicazione degli stili. La specificità si calcola in base al numero di ID, classi/pseudoclassi/attributi e elementi/pseudoelementi nel selettore.

// a = numero di ID
// b = numero di classi, pseudoclassi, attributi
// c = numero di elementi, pseudoelementi
// Gli stili inline hanno la priorità più alta (1, 0, 0, 0)
// Il selettore `*` ha specificità (0, 0, 0)

Esempio di calcolo della specificità:

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

Ordine delle dichiarazioni:

Se due regole hanno la stessa specificità, si applica quella dichiarata per ultima nel codice CSS.

Ereditarietà:

Alcune proprietà CSS vengono ereditate dagli elementi genitori a quelli figli (ad esempio, color, font-family). Se una proprietà non ha un valore esplicito sull'elemento, il browser cerca un valore ereditato risalendo l'Albero DOM.

In questo modo, il browser determina gli stili per un elemento facendo corrispondere i selettori, risolvendo conflitti tramite la specificità e l'ordine di dichiarazione, e considerando l'ereditarietà.