Selector hijo
El selector hijo (>) es similar al selector descentende con la diferencia de que el selector hijo solo afecta al primer nivel de anidamiento. Es decir, debe ser descendiente directo.
section > p {
color: red;
}
Supongamos el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Selector hijo</title>
<style>
section > p {
color: red;
}
</style>
</head>
<body>
<p>Párrafo incicial</p>
<section>
<p>Párrafo hijo de sección</p>
<article>
<p>Párrafo nieto de sección</p>
</article>
</section>
</body>
</html>
El resultado sería el siguiente:
Vemos que solo se muestra en rojo aquel párrafo que está justo dentro de <section>. No aplica al <p> que está dentro de <article> porque no es descendiente directo de <section>.
Probar en el navegador