Combinatore CSS

Combinatore CSS

Il combinatore è un meccanismo che spiega le relazioni tra i selettori.

I selettori CSS possono contenere più selettori semplici. Tra i selettori semplici, possiamo includere un combinatore.

In CSS ci sono quattro tipi diversi di combinatori:

  • Selettore di discendente (spazio)
  • Selettore di figlio (>)
  • Selettore di fratello adiacente (+)
  • Selettore di fratello universale (~)

Selettore di discendente

Il selettore di discendente abbinato a tutti gli elementi che sono discendenti dell'elemento specificato.

Il seguente esempio seleziona tutti gli elementi <p> all'interno dell'elemento <div>:

Esempio

div p {
  background-color: yellow;
}

Prova tu stesso

Selettore di figlio

Il selettore di figlio abbinato a tutti gli elementi che sono figli dell'elemento specificato.

Il seguente esempio seleziona tutti gli elementi <p> che sono elementi figli dell'elemento <div>:

Esempio

div > p {
  background-color: yellow;
}

Prova tu stesso

Selettore di fratello adiacente

Il selettore di fratello adiacente abbinato a tutti gli elementi同级 che sono adiacenti all'elemento specificato.

Gli elementi fratello (sugli stessi livelli) devono avere lo stesso elemento genitore. 'Adiacente' significa 'immediatamente dopo'.

Il seguente esempio seleziona tutti gli elementi <p> che seguono immediatamente l'elemento <div>:

Esempio

div + p {
  background-color: yellow;
}

Prova tu stesso

Selettore di fratello universale

Il selettore di fratello universale abbinato a tutti gli elementi同级 che appartengono all'elemento specificato.

Il seguente esempio seleziona tutti gli elementi <p> che sono elementi同级 dell'elemento <div>:

Esempio

div ~ p {
  background-color: yellow;
}

Prova tu stesso

Tutti i selettori di combinazione CSS

Selettore Esempio Descrizione dell'esempio
element element div p Seleziona tutti gli elementi <p> all'interno dell'elemento <div>.
element>element div > p Seleziona tutti gli elementi <p> con un elemento <div> come elemento genitore.
element+element div + p Seleziona tutti gli elementi <p> che seguono un elemento <div>.
element1~element2 p ~ ul Seleziona ogni elemento <ul> con un elemento <p> precedente.

Leggi di più

Libri extra:Selettore discendente CSS

Libri extra:Selettore figlio CSS

Libri extra:Selettore fratello successivo CSS