Selectores CSS Child vs Descendant

Estoy un poco confundido entre estos 2 selectores.

¿El selector descendiente :

div p

seleccionar todo pdentro de divsi es o no un descendiente inmediato? Entonces, si pestá dentro de otro div, ¿todavía estará seleccionado?

Entonces el selector de niños :

div > p

¿Cual es la diferencia? ¿Un niño significa niño inmediato ? P.ej.

<div><p>

vs

<div><div><p>

serán ambos seleccionados o no?

Solo piense en lo que significan las palabras "niño" y "descendiente" en inglés:

• Mi hija es mi hija y mi descendiente.
• Mi nieta no es mi hija, pero ella es mi descendiente.

Sí, estás en lo correcto. div pcoincidirá con el siguiente ejemplo, pero div > pno lo hará.

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

El primero se llama selector descendente y el segundo se llama selector hijo .

Bascailly, " ab selecciona" Todos los B del interior de una, mientras que " a> b " selecciona b de lo que son solamente los niños a la una , que no seleccionará b lo que es hijo de B lo que es hijo de una .

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 fondo rojo, porque el selector descendente selecciona también el del niño.

En teoría: Niño => un descendiente inmediato de un antepasado (por ejemplo, Joe y su padre)

Descendiente => cualquier elemento que descienda 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 utiliza el selector en un selector jQuery / Prototype / YUI, etc. en lugar de en una hoja de estilo, todavía funciona)

div p 

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

div> p

Significa hijos inmediatos Selecciona todos los elementos 'p' donde el padre es un elemento 'div'

La selección de CSS y la aplicación de estilo a un elemento particular se pueden hacer atravesando el elemento dom [Ejemplo

Ejemplo

.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>