Solución:
> es el combinador hijo, a veces llamado erróneamente combinador descendiente directo.1
Eso significa el selector div > p.some_class solo selecciona párrafos de .some_class que están anidados directamente dentro a divy no los párrafos que se anidan más dentro.
Una ilustración:
div > p.some_class {
background: yellow;
}<div>
<p class="some_class">Some text here</p> <!-- Selected [1] -->
<blockquote>
<p class="some_class">More text here</p> <!-- Not selected [2] -->
</blockquote>
</div>Qué está seleccionado y qué no:
-
Seleccionado
Esta
p.some_classse encuentra directamente dentro deldiv, de ahí que se establezca una relación padre-hijo entre ambos elementos. -
No seleccionado
Esta
p.some_classestá contenido por unblockquotedentro dediv, en lugar deldivsí mismo. Aunque estop.some_classes descendiente deldiv, no es un niño; es un nieto.En consecuencia, mientras
div > p.some_classno coincidirá con este elemento,div p.some_classwill, usando el combinador descendiente en su lugar.
1 Mucha gente va más allá para llamarlo “hijo directo” o “hijo inmediato”, pero eso es completamente innecesario (e increíblemente molesto para mí), porque un elemento hijo es inmediato por definición de todos modos, significan exactamente lo mismo. No existe el “niño indirecto”.
> (signo mayor que) es un Combinador CSS.
Un combinador es algo que explica la relación entre los selectores.
Un selector de CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.
Hay cuatro combinadores diferentes en CSS3:
- selector de descendientes (espacio)
- selector de niños (>)
- selector de hermanos adyacentes (+)
- selector general de hermanos (~)
Nota: < no es válido en selectores CSS.
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Producción:
Más información sobre los combinadores CSS
Como mencionan otros, es un selector de niños. Aquí está el enlace apropiado.
http://www.w3.org/TR/CSS2/selector.html#child-selectors