Selector hijo en CSS

El selector hijo > permite seleccionar elementos por anidamiento directo entre ellos.

Sintaxis

selector1 > selector2 {
	
}

Ejemplo

Apliquemos a todas las etiquetas b que se encuentren directamente dentro de las etiquetas p y coloreémoslas en rojo:

<p>
	texto <b>+</b>
</p>
<p>
	texto <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Ejemplo

Apliquemos a todas las etiquetas b que se encuentren directamente dentro de elementos con la clase .block y coloreémoslas en rojo:

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

.block > b {
	color: red;
}

Ejemplo

Apliquemos a todos los elementos con la clase .elem que se encuentren directamente dentro de elementos con la clase .block y coloreémoslos en rojo:

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

.block > .elem {
	color: red;
}

Véase también

Selector contextual,
que permite seleccionar un elemento por su elemento padre
Selector de hermano adyacente,
que permite seleccionar un elemento por su elemento hermano
Selector de hermanos general,
que permite seleccionar elementos después de uno dado
Selector universal,
que permite seleccionar todos los elementos