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 (spazio)
- Selettore figlio (>)
- Selettore fratello adiacente (+)
- Selettore fratello generale (~)
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;}
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>
:
div > p { background-color: yellow;}
Selettore Fratello Adiacente (+)
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;}
Selettore Fratello Generale (~)
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.