I selettori CSS di relazione

Go to the profile of  Jacopo Kahl
Jacopo Kahl
3 min di lettura
I selettori CSS di relazione

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.

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>Inetstazione</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.

Fig. Relazione gerarchica HTML

Ereditarietà

L'ereditarietà è un altro concetto importante nei CSS. L'ereditarietà determinata la possibilità di applica gli stili non solo all'elemento specificato ma anche a tutti i suoi discendenti.

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; }

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>

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>

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>

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>

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.

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Cos'è il box model
3 min di lettura
I Gradienti in CSS
5 min di lettura
Gestire lo sfondo in CSS
4 min di lettura
Gestire i font con i CSS
3 min di lettura
Proprietà del testo in CSS
4 min di lettura