CSS combinatori


Esempio

Panoramica

Selettore Descrizione
div span Selettore discendente (tutti <span> s discendenti di <div> )
div > span Selettore di bambini (tutti <span> che sono figli diretti di <div> )
a ~ span Selettore General Sibling (tutti <span> s che sono fratelli dopo un <a> )
a + span Selettore di Sibling adiacente (tutti i <span> che sono immediatamente dopo un <a> )

Nota: i selettori di Sibling scelgono come target gli elementi che vengono dopo di essi nel documento di origine. Il CSS, per sua natura (a cascata), non può bersagliare elementi precedenti o genitore . Tuttavia, usando la proprietà order flex, un precedente selettore di pari livello può essere simulato su supporti visivi .

Combinatore discendente: selector selector

Un combinatore discendente, rappresentato da almeno un carattere di spazio ( ), seleziona gli elementi che sono discendenti dell'elemento definito. Questo combinatore seleziona tutti i discendenti dell'elemento (dagli elementi figli in basso).

div p {
  color:red;
}
<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Live Demo su JSBin

Nell'esempio precedente, i primi due elementi <p> sono selezionati poiché sono entrambi i discendenti di <div> .


Combinatore di bambini: selector > selector

Il combinatore child ( > ) viene utilizzato per selezionare elementi figli , o discendenti diretti , dell'elemento specificato.

div > p {
  color:red;
}
<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Live Demo su JSBin

Il precedente CSS seleziona solo il primo elemento <p> , in quanto è l'unico paragrafo direttamente discendente da un <div> .

Il secondo elemento <p> non è selezionato perché non è un figlio diretto di <div> .


Combinatore Sibling adiacente: selector + selector

Il combinatore adiacente di pari livello ( + ) seleziona un elemento fratello che segue immediatamente un elemento specificato.

p + p {
  color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Live Demo su JSBin

L'esempio sopra seleziona solo quegli elementi <p> che sono direttamente preceduti da un altro elemento <p> .


General Sibling Combinator: selector ~ selector

Il combinatore generale ( ~ ) seleziona tutti i fratelli che seguono l'elemento specificato.

p ~ p {
  color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Live Demo su JSBin

L'esempio sopra seleziona tutti gli elementi <p> preceduti da un altro elemento <p> , indipendentemente dal fatto che siano immediatamente adiacenti.