Selector hijo en CSS
Supongamos que tenemos el siguiente código:
<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:
p 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:
p > i {
color: red;
}
Resultado de la ejecución del código:
Se da el siguiente código:
<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>
Pinte de color rojo solo las etiquetas b
que sean hijos directos
de las etiquetas li.
