5.1 Tipi di selettori
I selettori combinatori in CSS permettono di selezionare elementi in base alla loro posizione relativa nel DOM tree. Offrono un controllo più preciso sugli stili, consentendo di stilizzare elementi in base al loro contesto. In CSS, esistono diversi tipi di selettori combinatori: discendente, figlio, fratello adiacente e fratello generico.
Tipi di selettori combinatori:
- Selettore discendente (Descendant Selector)
- Selettore figlio (Child Selector)
- Selettore fratello adiacente (Adjacent Sibling Selector)
- Selettore fratello generico (General Sibling Selector)
5.2 Selettore discendente
Il selettore discendente seleziona tutti gli elementi che sono discendenti di un elemento specificato. I discendenti sono tutti gli elementi che si trovano all'interno di un elemento specificato a qualsiasi livello di nidificazione (possono essere figli, nipoti, bisnipoti, ecc.).
Sintassi:
genitore discendente {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti i <p> che si trovano all'interno di <div> */
div p {
color: blue;
}
<div>
<p>Questo paragrafo sarà blu.</p>
<div>
<p>Questo paragrafo sarà blu, perché è un discendente di "div".</p>
</div>
</div>
<p>Questo paragrafo non sarà blu.</p>
5.3 Selettore figlio
Il selettore figlio seleziona solo quegli elementi che sono figli diretti di un elemento genitore specificato.
Sintassi:
genitore > figlio {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona solo <p> che sono figli diretti di .container */
.container > p {
color: green;
}
<div class="container">
<p>Questo paragrafo sarà verde.</p>
<div class="wrapper">
<p>Questo paragrafo non sarà verde, perché non è un figlio diretto di .container.</p>
</div>
<p>Questo paragrafo sarà verde.</p>
</div>
<p>Questo paragrafo non sarà verde.</p>
5.4 Selettore fratello adiacente
Il selettore fratello adiacente seleziona un elemento che segue immediatamente un elemento specificato e si trova allo stesso livello di nidificazione.
Sintassi:
precedente + successivo {
proprietà: valore;
proprietà: valore;
}
/* Seleziona <p> che segue immediatamente <h1> */
h1 + p {
color: red;
}
<h1>Titolo 1</h1>
<p>Questo paragrafo sarà rosso, perché segue immediatamente "h1".</p>
<p>Questo paragrafo non sarà rosso.</p>
5.5 Selettore fratello generico
Il selettore fratello generico seleziona tutti gli elementi che seguono un elemento specificato e si trovano allo stesso livello di nidificazione.
Sintassi:
precedente ~ successivo {
proprietà: valore;
proprietà: valore;
}
Esempio:
/* Seleziona tutti i <p> che seguono <h1> allo stesso livello di nidificazione */
h1 ~ p {
color: purple;
}
<h1>Titolo 1</h1>
<p>Questo paragrafo sarà viola.</p>
<p>Questo paragrafo sarà viola.</p>
<div>
<p>Questo paragrafo non sarà viola, perché si trova a un altro livello di nidificazione.</p>
</div>
GO TO FULL VERSION