Qué significa el selector ">" (mayor que) en CSS?
El selector ">" (mayor que) en CSS es un combinador de CSS. Un selector de CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador. El combinador ">" sirve para hacer referencia a un objeto descendiente hijo de un elemento.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Párrafo 1 en el div.</p> <!-- Descendiente e hijo -->
<p>Párrafo 2 en el div.</p> <!-- Descendiente e hijo -->
<span><p>Párrafo 3 en el div.</p></span> <!-- Descendiente pero no hijo -->
</div>
<p>Párrafo 4 fuera del div.</p>
<p>Párrafo 5 fuera del div.</p>
</body>
</html>
En el ejemplo hemos puesto la regla div > p. Le estamos indicando a la hoja de estilos que cambie el color de background de todos los párrafos que sea un descendiente hijo de cualquier div, pero tiene que tener la categoría de hijo. Es decir, sólo va a aplicar el cambio de color al párrafo 1 y al párrafo 2. El párrafo 3 es descendiente pero no es hijo, así que no aplica la regla y no cambia el color y los párrafos 4 y 5 son párrafos que están fuera del div directamente, con lo cuál, tampoco aplicaría.
