Combinatori CSS
Combinatori CSS
Un combinatore è qualcosa che spiega la relazione tra i selettori.
Un selettore CSS può contenere più di un semplice selettore. Tra i semplici selettori possiamo includere un combinatore.
Ci sono quattro diversi combinatori in CSS:
- selettore discendente (spazio)
- selettore figlio (>)
- selettore fratelli adiacenti (+)
- selettore fratelli generali (~)
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>:
Esempio
div p {
background-color: yellow;
}
Selettore figlio (>)
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>:
Esempio
div > p {
background-color: yellow;
}
Selettore fratelli adiacenti (+)
Il selettore di pari livello adiacente viene utilizzato per selezionare un elemento che si trova direttamente dopo un altro elemento specifico.
Gli elementi di pari livello devono avere lo stesso elemento padre e "adiacente" significa "immediatamente successivo".
L'esempio seguente seleziona il primo elemento <p> che viene posizionato immediatamente dopo gli elementi <div>:
Esempio
div + p {
background-color: yellow;
}
Selettore fratello generale (~)
Il selettore di fratelli generali seleziona tutti gli elementi che sono fratelli successivi di un elemento specificato.
L'esempio seguente seleziona tutti gli elementi <p> che sono fratelli successivi di elementi <div>:
Esempio
div ~ p {
background-color: yellow;
}
Tutti i selettori combinatori CSS
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |