Selettore figlio in CSS

Il selettore figlio > consente di selezionare gli elementi in base all'annidamento diretto l'uno nell'altro.

Sintassi

cssselettore1 > selettore2 {
  
}

Esempio

Accediamo a tutti i tag b che si trovano direttamente all'interno dei tag p e coloriamoli in rosso:

html<p>
  text <b>+</b>
</p>
<p>
  text <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

Esempio

Accediamo a tutti i tag b che si trovano direttamente all'interno degli elementi con classe .block e coloriamoli in rosso:

html<p class="block">
  text <b>+</b>
</p>
<p class="block">
  text <i><b>-</b></i>
</p>
<p>
  text <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

Esempio

Accediamo a tutti gli elementi con classe .elem, che si trovano direttamente all'interno degli elementi con classe .block, e coloriamoli in rosso:

html<p class="block">
  text <span class="elem">+</span>
</p>
<p class="block">
  text <i><span class="elem">-</span></i>
</p>
<p class="block">
  text <span>-</span>
</p>
<p>
  text <span class="elem">-</span>
</p>

css.block > .elem {
  color: red;
}

Результат:

Vedi anche