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

Ci sono 4 combinatori differenti nei CSS:

• selettore discendente (spazio)
• selettore figlio (>)
• selettore paritario adiacente (+)
• selettore paritario generale (~)

Selettore discendente

I selettore discendente confronta tutti gli elementi che sono discendenti di un elemento specificato.

L'esempio seguente, seleziona tutti gli elementi <p> all'interno di elementi <div>:

div p {
    background-color: yellow;
  }
  

Visualizza esempio

Selettore figlio (>)

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

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

div > p {
    background-color: yellow;
  }
  

Visualizza esempio

Selettore paritario adiacente (+)

Il selettore paritario adiacente è usato per selezionare un elemento che è direttamente adiacente a un altro specifico elemento.

Gli elementi paritari devono avere lo stesso elemento genitore, e "adiacente" significa immediatamente seguente.

L'esempio seguente seleziona il primo elemento <p> che si trova immediatamente dopo gli elementi <div>:

div + p {
    background-color: yellow;
  }
  

Visualizza esempio

Selettore paritario generale (~)

Il selettore paritario generale seleziona tutti gli elementi che sono i paritari successivi di un elemento specifico.

L'esempio seguente seleziona tutti gli elementi <p> che sono paritari successivi degl'elementi <div>:

div ~ p {
    background-color: yellow;
  }
  

Visualizza esempio

Tutti i selettori combinatori nei CSS