CSS Child vs Descendant selectores

Question

Estoy un poco confundido entre estos 2 selectores.

¿El descendiente selector:

div p 

seleccionar todos p dentro de un div si es o no es un descedent inmediata? Entonces, si el p está dentro de otro div, ¿seguirá siendo seleccionado?

Entonces el niño selector:

div > p 

Cuál es la diferencia? ¿Significa un niño inmediato niño? P.ej.

<div><p> 

vs

<div><div><p> 

ambos serán seleccionados, o no?

Answer 1

Basta pensar en lo que las palabras "niño" y "descendientes" significan en Inglés:

• Mi hija es a la vez mi hijo y mi descendiente
• Mi nieta no es mi hijo, pero ella es mi descendiente.

Answer 2

Sí, estás en lo cierto. div p coincidirá con el siguiente ejemplo, pero div > p no lo hará.

<div><table><tr><td><p> <!... 

El primero se llama descendant selector y el segundo se llama child selector.

Answer 3

Tenga en cuenta que el selector niño no es compatible en Internet Explorer 6. (Si utiliza el selector en un selector de jQuery/Prototype/YUI etc. en vez de en una hoja de estilo que todavía funciona, aunque)

Answer 4

Bascailly, "ab" selecciona todos los hostales del interior de una, mientras que "a> b" selecciona de b lo son sólo los niños a la un, no va a seleccionar b lo que es hijo de b lo 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> 

Color de fondo de ABC y DEF será de color verde, pero ghi tendrá color de fondo rojo.

IMPORTANTE: Si cambia el orden de las reglas para:

div>span{background:green} 
div span{background:red} 

Todas las cartas tendrán fondo rojo, porque el selector descendiente selecciona niño es demasiado.

Answer 5

div p

Selecciona todos 'p' elementos en los que el padre es un elemento 'div'

div > p

significa hijos inmediatos selecciona todos los elementos 'p', donde el padre es un elemento 'div'

Answer 6

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 en particular (p. Joe y su tatara-abuelo)

En la práctica: tratar este código 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/

Answer 7

selección CSS y la aplicación de estilo a un elemento en particular se puede realizar atravesando el elemento dom [Ejemplo

Example

.a .b .c .d{ 
    background: #bdbdbd; 
} 
div>div>div>div:last-child{ 
    background: red; 
} 

<div class='a'>The first paragraph. 
<div class='b'>The second paragraph. 
    <div class='c'>The third paragraph. 
    <div class='d'>The fourth paragraph.</div> 
    <div class='e'>The fourth paragraph.</div> 
    </div> 
</div> 
</div>