Spiega come il browser determina a quali elementi si applicano gli stili CSS.

Il browser analizza l'albero HTML e le regole CSS, quindi costruisce l'albero di rendering (render tree), che collega gli elementi DOM agli stili CSS corrispondenti.

Il processo di determinazione degli stili include diversi passaggi:

1. Parsing di HTML e CSS: Il browser analizza il documento HTML creando un albero DOM. Contemporaneamente, analizza gli stili CSS (da tag <style>, <link> o stili inline), creando un albero CSSOM (CSS Object Model).

2. Corrispondenza dei selettori: Il browser attraversa l'albero DOM e cerca per ogni nodo nel DOM le regole corrispondenti nel CSSOM. La corrispondenza avviene da destra a sinistra. Ad esempio, per il selettore .parent .child, il browser cerca prima gli elementi con la classe child, poi verifica se hanno un genitore con la classe parent. Questo metodo permette di scartare rapidamente grandi sottoalberi che non corrispondono al selettore.

3. Cascata: Quando vengono trovate più regole per lo stesso elemento, il browser applica la cascata. La cascata determina l'ordine di applicazione degli stili in base a:

   • La fonte degli stili (stili dell'autore, dell'utente, del browser).
   • La specificità dei selettori.
   • L'ordine di apparizione delle regole.
   • L'uso di !important.

   Esempio di specificità:

   Tipo di selettore	Punti
   Stili inline	1000
   Selettori ID	100
   Classi, attributi	10
   Tag, pseudo-elementi	1
   Universale (*)	0

   I selettori più specifici hanno priorità.

4. Ereditarietà: Alcune proprietà CSS vengono ereditate dagli elementi genitori ai figli (ad esempio, font-size, color). Il browser tiene conto di ciò nell'applicazione degli stili.

5. Costruzione dell'albero di rendering: Basandosi sull'albero DOM e sugli stili CSS applicati, si costruisce l'albero di rendering (o layout tree). Questo contiene solo gli elementi visibili e i loro stili necessari per il layout e il rendering.

   // Esempio: elemento con più regole CSS
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specificità: 1 */
     color: blue;
   }
   
   .text {  /* Specificità: 10 */
     color: red; /* Questo colore verrà applicato perché più specifico */
     font-size: 16px;
   }
   
   p.text { /* Specificità: 11 */
      font-weight: bold; /* Verrà applicata questa proprietà */
   }
   
   /* L'ordine è importante anche per i selettori con la stessa specificità */
   div { color: green; }
   div { color: yellow; } /* Verrà applicato il giallo */
   

In questo modo, il browser attraversa le fasi di parsing, corrispondenza, cascata e ereditarietà per determinare l'insieme finale di stili per ogni elemento prima di costruire l'albero di rendering e procedere con il rendering.