Selector hijo en CSS

Supongamos que tenemos el siguiente código:

html<p>
  texto <b><i>negrita cursiva</i></b>
</p>
<p>
  texto <i>solo cursiva</i>
</p>

Supongamos que queremos seleccionar todas las etiquetas i que sean descendientes de párrafos. Hagámoslo:

cssp i {
  color: red;
}

Resultado de la ejecución del código:

Ahora seleccionemos las etiquetas i que sean hijos directos de nuestros párrafos. En esto nos ayudará el selector hijo >.

Para entender cómo usarlo, comparemos con el selector de descendientes. Así: p i - seleccionaremos todas las cursivas dentro de los párrafos, y así: p > i - solo las cursivas que sean hijos directos de los párrafos.

Apliquemos este selector a nuestro código HTML:

cssp > i {
  color: red;
}

Resultado de la ejecución del código:

html<ul>
  <li>
    <i>cursiva</i>
    <b>negrita</b>
    <b><i>negrita cursiva</i></b>
  </li>
  <li>
    <i>cursiva</i>
    <b>negrita</b>
    <b><i>negrita cursiva</i></b>
  </li>
</ul>