¿Qué significa el selector CSS ">" (signo mayor que)?

>es el combinador hijo , a veces llamado erróneamente combinador descendiente directo. ¹

Eso significa que el selector div > p.some_classsolo coincide con los párrafos .some_classque están anidados directamente dentro de a div, y no con los párrafos que están anidados más adentro. Esto implica que cada elemento que coincide div > p.some_classnecesariamente también coincide div p.some_classcon el combinador descendiente (espacio), por lo que, comprensiblemente, a menudo se confunden los dos.

Una ilustración que compara el combinador hijo con el combinador descendiente:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

¿Qué elementos coinciden con qué selectores?

1. Coincidente con ambos div > p.some_classydiv p.some_class
   Esto p.some_classse encuentra directamente dentro de div, por lo que se establece una relación padre-hijo entre ambos elementos. Dado que "niño" es un tipo de "descendiente", cualquier elemento hijo es, por definición, también un descendiente. Por tanto, se aplican ambas reglas.

2. Coincidente solo condiv p.some_class
   Esto p.some_classestá contenido en a blockquotedentro de div, en lugar de en divsí mismo. Aunque este p.some_classes un descendiente de div, no es un niño; es un nieto. Por tanto, sólo se aplica la regla con el combinador descendiente en su selector.

¹ _{Muchas personas van más allá y lo llaman "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, por lo que significan exactamente lo mismo. No existe tal cosa como un "niño indirecto".}

Jul 12 '2010 04:07 BoltClock