1. Tipi di selettori combinati
I selettori combinati in CSS ti permettono di selezionare elementi basandoti sulla loro posizione gerarchica rispetto ad altri elementi. Questo li rende utili per applicare stili a elementi che dipendono dal contesto, o quando dobbiamo stilizzare elementi all'interno di una struttura complessa. I selettori combinati sono uno strumento potente per selezioni precise, quando una classe o un identificativo non sono sufficienti. Vediamo i principali tipi di selettori combinati in CSS, inclusi il selettore discendente, il selettore figlio, il selettore fratello adiacente e il selettore fratello generico.
I selettori combinati in CSS includono diversi modi per selezionare elementi basandosi sulla gerarchia HTML. I principali tipi di selettori combinati sono:
- Selettore discendente (Descendant Selector): seleziona elementi che si trovano dentro un altro elemento, a qualsiasi livello di annidamento.
- Selettore figlio (Child Selector): seleziona solo i figli diretti (immediati) di un determinato elemento.
- Selettore fratello adiacente (Adjacent Sibling Selector): seleziona un elemento che segue immediatamente un altro elemento allo stesso livello gerarchico.
- Selettore fratello generico (General Sibling Selector): seleziona tutti gli elementi sullo stesso livello che seguono un determinato elemento.
Ognuno di questi selettori è adatto a diversi scenari e consente di selezionare con precisione gli elementi in base alla loro posizione nella pagina.
2. Selettore discendente (Descendant Selector)
Il selettore discendente seleziona tutti gli elementi all'interno di un altro elemento, indipendentemente dal livello di annidamento. Si scrive con uno spazio tra i selettori. Questo tipo di selettore è utile quando devi stilizzare elementi all'interno di un altro elemento, ad esempio tutti i <p> all'interno di un <div> con una determinata classe.
.container p {
color: blue;
}
<div class="container">
<p>Questo testo sarà blu, dato che si trova nel contenitore.</p>
<div>
<p>Anche questo testo sarà blu.</p>
</div>
</div>
<p>Questo testo resterà invariato, dato che non si trova nel contenitore.</p>
Qui, il selettore .container p selezionerà tutti gli elementi <p> all'interno dell'elemento con la classe container, inclusi gli elementi a qualsiasi livello di annidamento.
3. Selettore figlio (Child Selector)
Il selettore figlio seleziona solo i figli immediati di un elemento. Si scrive utilizzando il simbolo > tra i selettori. Questo selettore è comodo quando devi applicare uno stile solo agli elementi di primo livello di annidamento, senza toccare i livelli più profondi.
.container > p {
font-weight: bold;
}
<div class="container">
<p>Questo testo sarà in grassetto.</p>
<div>
<p>Questo testo resterà normale, dato che non è un figlio diretto del container.</p>
</div>
</div>
Qui, solo il primo <p> sarà in grassetto, dato che è un figlio diretto del .container, mentre il <p> annidato non cambierà.
4. Selettore fratello adiacente (Adjacent Sibling Selector)
Il selettore fratello adiacente seleziona un elemento che segue immediatamente un altro elemento e si trova allo stesso livello di annidamento. Questo selettore è indicato con il simbolo + tra i selettori ed è comodo per applicare stili a un elemento che segue subito dopo un altro, ad esempio al primo paragrafo che segue un'intestazione.
h2 + p {
color: green;
}
<h2>Intestazione</h2>
<p>Questo testo diventerà verde, dato che segue immediatamente l'intestazione.</p>
<p>Questo testo non cambierà, dato che non è un fratello adiacente di h2.</p>
Qui, il selettore h2 + p cambierà il colore solo del primo paragrafo <p>, che segue immediatamente il <h2>.
5. Selettore fratello generico (General Sibling Selector)
Il selettore fratello generico seleziona tutti gli elementi allo stesso livello di annidamento che seguono un determinato elemento, indipendentemente dal fatto che si trovino immediatamente dopo o con alcuni elementi in mezzo. Questo selettore è indicato con il simbolo ~ tra i selettori.
h2 ~ p {
font-style: italic;
}
<h2>Intestazione</h2>
<p>Questo paragrafo sarà in corsivo.</p>
<div>
<p>Anche questo paragrafo sarà in corsivo, dato che è un fratello di h2 allo stesso livello di annidamento.</p>
</div>
In questo esempio, il selettore h2 ~ p seleziona tutti gli elementi <p> che seguono il <h2> allo stesso livello, indipendentemente dal fatto che ci siano altri elementi in mezzo.
6. Esempio di utilizzo di tutti i selettori combinati
Di seguito è riportato un esempio di HTML e CSS che dimostra l'uso di tutti i selettori combinati per selezionare diversi elementi in base alla loro posizione nella pagina.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di selettori combinati CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>Paragrafo che è un discendente e figlio del .container.</p>
<div>
<p>Paragrafo che è un discendente, ma non un figlio del .container.</p>
</div>
</div>
<h2>Intestazione</h2>
<p>Paragrafo che è un fratello adiacente di h2.</p>
<div>Questo blocco non influirà sui paragrafi successivi.</div>
<p>Paragrafo che è un fratello generico di h2.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di selettori combinati CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>Paragrafo che è un discendente e figlio del .container.</p>
<div>
<p>Paragrafo che è un discendente, ma non un figlio del .container.</p>
</div>
</div>
<h2>Intestazione</h2>
<p>Paragrafo che è un fratello adiacente di h2.</p>
<div>Questo blocco non influirà sui paragrafi successivi.</div>
<p>Paragrafo che è un fratello generico di h2.</p>
</body>
</html>
/* Selettore discendente */
.container p {
color: blue;
}
/* Selettore figlio */
.container > p {
font-weight: bold;
}
/* Selettore fratello adiacente */
h2 + p {
color: green;
}
/* Selettore fratello generico */
h2 ~ p {
font-style: italic;
}
GO TO FULL VERSION