Seletor filho em CSS

Suponha que temos o seguinte código:

html<p>
  texto <b><i>negrito itálico</i></b>
</p>
<p>
  texto <i>apenas itálico</i>
</p>

Suponha que queremos selecionar todas as tags i que são descendentes de parágrafos. Vamos fazer isso:

cssp i {
  color: red;
}

Resultado da execução do código:

Agora vamos selecionar as tags i que são descendentes diretos de nossos parágrafos. O seletor filho > nos ajudará nisso.

Para entender como usá-lo, vamos compará-lo com o seletor de descendentes. Assim: p i - selecionaremos todos os itálicos dentro dos parágrafos, e assim: p > i - apenas os itálicos que são descendentes diretos dos parágrafos.

Vamos aplicar este seletor ao nosso código HTML:

cssp > i {
  color: red;
}

Resultado da execução do código:

html<ul>
  <li>
    <i>itálico</i>
    <b>negrito</b>
    <b><i>negrito itálico</i></b>
  </li>
  <li>
    <i>itálico</i>
    <b>negrito</b>
    <b><i>negrito itálico</i></b>
  </li>
</ul>