Combinatori CSS

Un selettore CSS può contenere più di un selettore semplice. Tra i selettori semplici, possiamo includere un combinatore.

Ci sono quattro diversi tipi di combinatori in CSS:

Selettore Discendente

Il selettore discendente corrisponde a tutti gli elementi che sono discendenti di un elemento specificato.

L’esempio seguente seleziona tutti gli elementi <p> all’interno degli elementi <div>:

div p {
  background-color: yellow;
}

Il selettore figlio seleziona tutti gli elementi che sono figli di un elemento specificato.

L’esempio seguente seleziona tutti gli elementi <p> che sono figli di un elemento <div>:

div > p {
  background-color: yellow;
}

Il selettore fratello adiacente è utilizzato per selezionare un elemento che segue direttamente un altro elemento specifico.

Gli elementi fratelli devono avere lo stesso elemento padre e “adiacente” significa “immediatamente successivo”.

L’esempio seguente seleziona il primo elemento <p> che segue immediatamente gli elementi <div>:

div + p {
  background-color: yellow;
}

Il selettore fratello generale seleziona tutti gli elementi che sono fratelli successivi di un elemento specificato.

L’esempio seguente seleziona tutti gli elementi <p> che sono fratelli successivi degli elementi <div>:

div ~ p {
  background-color: yellow;
}

I combinatori sono utili per selezionare e stilizzare gli elementi in base alle loro relazioni nel documento HTML.