Indice
- Gerarchia HTML
- Ereditarietà
- Selettore di adiacenza
- Selettore di discendenti
- Selettore di figli
- Selettori di successori
I selettori di relazione corrispondono ad uno o più elementi in relazione tra loro all'interno dell'albero DOM (Documenti Object Model). Grazie a questi selettori possiamo trovare gli elementi figli, o fratelli di un elemento.
1. Gerarchia HTML
Un documento HTML può essere immaginato come un albero con al suo un elemento radice e tanti figli (o foglie) al proprio interno. Ogni elemento all'interno dell'albero può essere un genitore o un figlio di un altro elemento.
Qualsiasi elemento sopra l'altro uno si chiama antenato (o elemento contenitore) e l'elemento direttamente sopra è il genitore. Allo stesso modo, un elemento al di sotto di un altro è chiamato discendente, e l'elemento sottostante verrà chiamato figlio.
A sua volta, un elemento che condivide lo stesso genitore con un altro elemento è chiamato un fratello.
Prendiamo il seguente esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titolo</title>
</head>
<body>
<h1>Intestazione</h1>
<p>Paragrafo</p>
</body>
</html>
In questo esempio, <h1> e <p> sono fratelli poiché condividono lo stesso elemento padre <body>. Sia <body> che <html> sono i loro elementi antenati, poiché come potete vedere dall'esempio sono i loro contenitori.
2. Ereditarietà
Ad esempio, la proprietà color è ereditata per impostazione predefinita, mentre
la proprietà border non lo è.
L'ereditarietà consente di applicare uno stile a un antenato comune ogni volta che un elemento si trova in posizione discendente, ereditando così quello stesso stile.
Questo processo è più conveniente e mantenibile che applicare lo stile a ogni elemento discendente. Ad esempio se il testo di un intero documento deve essere impostato su colore particolare, possiamo applicare lo stile a <body>, che è l'elemento antenato comune per tutti gli elementi visibili nella pagina HTML.
/* Tutti i testi erediteranno il colore nero */
body { color: #000000; }
3. Selettore di adiacenza
Il selettore di adiacenza consente di identificare gli elementi fratelli adiacenti. Questi elementi devono essere posizionati esattamente uno dopo l'altro per poter essere selezionati.
h1+p { color: blue; }
Questo selettore crea una correlazione tra l'elemento <h1> e <p> e seleziona ed applica lo stile al secondo elemento. Come potete vedere il match avviene grazie a +.
<h1>Non blue</h1>
<p>Blu</p>
<p>Non blu</p>
4. Selettore di discendenti
Il selettore di discendenti crea una correlazione tra quegli elementi che sono figlio o nipote di un altro elemento. Questo selettore è molto utili se si vuole applicare uno stile solo ad un elemento che è contenuto all'interno di un altro.
div p { color: blue; }
Nell'esempio la regola viene al paragrafo poiché è discendente dell'elemento <div>.
<div>
<p>Colore blu</p>
</div>
5. Selettore di figli
Il selettore diretto di figli crea un match se il secondo elemento è un immediato discendente del primo elemento.
div > p { color: blue; }
In questo esempio il primo paragrafo non verrà colorato di blu, poiché non è discendente diretto dell'elemento <div>, mentre il secondo paragrafo si.
<div>
<span>
<p>Non blu</p>
</span>
<p>Blu</p>
</div>
6. Selettori di successori
CSS3 ha aggiunto anche il generico selettori di successori, che crea un match con il secondo elemento solo se è preceduto da un elemento fratello.
h1~p { color: blue; }
In questo esempio gli ultimi due paragrafi verranno colorati di blu, poiché sono preceduti da <h1>, mentre il primo paragrafo non sarà interessato da questa modifica.
<p>Non blu</p>
<h1>Non blu</h1>
<p>Blu</p>
<p>Blu</p>
Conclusione
Un aiuto per orientarsi visivamente tra le relazioni di parentela all'interno del codice, è quello di seguire l'indentazione dello stesso. Come avete visto negli esempi precedenti, di solito un elemento figlio si trova subito sotto e spostato verso destra rispetto al proprio discendente.
