Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el "signo de mayor que" (>).
Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser hijo directo de otro elemento.
p > span { color: blue; }
<p>
<span>Texto1</span>
</p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.
Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector descendente y el selector de hijos:
p a { color: red; }
p > a { color: red; }
<p>
<a href="#">Enlace1</a>
</p>
<p>
<span>
<a href="#">Enlace2</a>
</span>
</p>El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.
El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.