Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (VI)

2- Selector de hijos.

Podemos definir un selector con la condición de que una etiqueta "esté dentro de otra a primer nivel de profundidad o anidamiento" o lo que es lo mismo, "que sea un hijo directo" de otra. Una etiqueta está dentro de otra a primer nivel si la primera está dentro de las etiquetas de inicio y de cierre de la segunda, y no está dentro de otra etiqueta. Un selector hijo se escribe separando las etiquetas con un carácter > (mayor que). En el siguiente ejemplo la regla se aplicará a las etiquetas span que estén dentro de una etiqueta div con un sólo nivel de profundidad.

div > span { color: red  }

Para este fragmento de página:

<h2>Cabecera <span>nivel h2</span> </h2>
<div>Primera <span>división</span> </div>
<div>
    <p>Párrafo <span>uno</span></p>
</div>
<p>Párrafo <span>dos</span></p>

Produce el siguiente resultado,

Igual que en el caso anterior, para explicar de forma más clara este resultado nos vamos a ayudar del mismo esquema de árbol anterior.

Como vemos la segunda etiqueta span que dice "división" se ve en color rojo porque está dentro de la etiqueta div a primer nivel de profundidad, es decir es un hijo. Sin embargo, la tercera etiqueta span que dice "uno" no se ve en color rojo porque está a segundo nivel de profundidad, puesto que está dentro de una etiqueta p que a su vez está dentro de una etiqueta div, es decir, un descendiente pero no un hijo.