I SELETTORI CSS DI RELAZIONE

Sviluppo Web 30 mar 2021

Indice

  1. Gerarchia HTML
  2. Ereditarietà
  3. Selettore di adiacenza
  4. Selettore di discendenti
  5. Selettore di figli
  6. 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.

Relazione gerarchica HTML
Relazione gerarchica HTML

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

Hai bisogno di un sito web?

Realizziamo siti web professionali per piccole e medie imprese

Contattaci
Sviluppo siti web

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.

Categorie

Ottimo! Ti sei iscritto al blog.
Ottimo! Completa il checkout per accedere.
Bentornato/a! Hai effettuato con successo il login.
Ottimo! Il tuo account è stato attivato! Ora hai accesso a tutti i contenuti del blog.

Hai bisogno di un sito Web? Affidati a noi!