Selectores CSS hijo vs descendiente
Estoy un poco confundido entre estos 2 selectores.
¿El selector descendiente :
div p
seleccionar todo p
dentro de div
si es o no un descendiente inmediato? Entonces, si p
está dentro de otro, div
¿seguirá seleccionado?
Luego el selector de niños :
div > p
¿Cual es la diferencia? ¿Un niño significa un niño inmediato ? P.ej.
<div><p>
vs
<div><div><p>
¿Serán ambos seleccionados o no?
Basta pensar en lo que significan las palabras "niño" y "descendiente" en inglés:
- Mi hija es a la vez mi hija y mi descendiente.
- Mi nieta no es mi hija, pero es mi descendiente.
Sí, estás en lo correcto. div p
coincidirá con el siguiente ejemplo, pero div > p
no lo hará.
<div><table><tr><td><p> <!...
El primero se llama selector descendiente y el segundo se llama selector secundario .
Bascailly, " ab " selecciona todos los b dentro de a, mientras que " a>b " selecciona los b que son hijos únicos de a , no seleccionará b que es hijo de b que es hijo de a .
Este ejemplo ilustra la diferencia:
div span{background:red}
div>span{background:green}
<div><span>abc</span><span>def<span>ghi</span></span></div>
El color de fondo de abc y def será verde, pero ghi tendrá un color de fondo rojo.
IMPORTANTE: Si cambia el orden de las reglas a:
div>span{background:green}
div span{background:red}
Todas las letras tendrán un fondo rojo, porque el selector de descendientes también selecciona las del niño.
En teoría: Niño => un descendiente inmediato de un antepasado (por ejemplo, Joe y su padre)
Descendiente => cualquier elemento que desciende de un antepasado particular (por ejemplo, Joe y su tatarabuelo)
En la práctica: prueba este HTML:
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
con este CSS:
span { color: red; }
div.one span { color: blue; }
div.two > span { color: green; }
http://jsfiddle.net/X343c/1/
Tenga en cuenta que el selector secundario no es compatible con Internet Explorer 6. (Si usa el selector en un selector jQuery/Prototype/YUI, etc. en lugar de en una hoja de estilo, aún funciona)