Selettore di fratello consecutivo CSS

Il selettore dei fratelli consecutivi (Adjacent sibling selector) può selezionare un elemento che segue un altro elemento, e che ha lo stesso elemento genitore.

Selezionare i fratelli consecutivi

Se è necessario selezionare un elemento che segue un altro elemento e che ha lo stesso elemento genitore, si può utilizzare il selettore dei fratelli consecutivi (Adjacent sibling selector).

Ad esempio, se si desidera aumentare il margine superiore del paragrafo che segue l'elemento h1, si può scrivere così:

h1 + p {margin-top:50px;}

Questo selettore si legge come: “Seleziona il paragrafo che segue l'elemento h1, dove h1 e p hanno lo stesso elemento genitore”.

Prova tu stesso

Spiegazione della sintassi

Il selettore dei fratelli consecutivi utilizza il segno più (+), ovvero il simbolo di combinazione dei fratelli consecutivi (Adjacent sibling combinator).

Nota:Come i simboli di combinazione dei figli, vicino al simbolo di combinazione dei fratelli consecutivi possono esserci spazi bianchi.

Vedete il seguente frammento dell'albero del documento:

<div>
  <ul>
    <li>Elemento elenco 1</li>
    <li>Elemento elenco 2</li>
    <li>Elemento elenco 3</li>
  </ul>
  <ol>
    <li>Elemento elenco 1</li>
    <li>Elemento elenco 2</li>
    <li>Elemento elenco 3</li>
  </ol>
</div>

Nel frammento sopra, l'elemento div contiene due liste: una lista non ordinata e una lista ordinata, ciascuna contenente tre elementi di lista. Queste liste sono fratelli consecutivi, e gli elementi di lista stessi sono anche fratelli consecutivi. Tuttavia, gli elementi di lista del primo elenco non sono fratelli consecutivi rispetto a quelli del secondo elenco, perché questi gruppi di elementi di lista non appartengono allo stesso elemento padre (al massimo possono essere cugini).

Ricorda, un simbolo di combinazione può selezionare solo il secondo elemento tra due fratelli consecutivi. Vedi il seguente selettore:

li + li {font-weight:bold;}

Questo selettore renderà in grassetto solo il secondo e il terzo elemento della lista. Il primo elemento della lista non sarà influenzato.

Prova tu stesso

Combinazione con altri selettori

Il simbolo di fratello consecutivo può essere combinato con altri simboli di combinazione:

html > body table + ul {margin-top:20px;}

Questo selettore viene interpretato come: selezionare tutti gli elementi ul che appaiono immediatamente dopo un elemento table, l'elemento table si trova all'interno di un elemento body, l'elemento body è un figlio dell'elemento html.