CSS Child vs selectores descendientes

Estoy un poco confundido entre estos 2 selectores.

¿El selector descendiente :

div p 

seleccionar todo p dentro de un div ya sea que sea un descendiente inmediato o no? Entonces, si la p está dentro de otra div , ¿seguirá siendo seleccionada?

Luego el selector de niños :

 div > p 

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

 

vs

 

ambos serán 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 p coincidirá con el siguiente ejemplo, pero div > p no lo hará.

 

El primero se llama selector descendiente y el segundo se llama selector infantil .

Bascailly, ” ab ” selecciona todas las b dentro de a, mientras que ” a> b ” selecciona b lo que son solo hijos a la a , no 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} 
abcdefghi

El color de fondo de abc y def será verde, pero ghi tendrá 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, ya que el selector descendiente también selecciona el elemento secundario.

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 hacerlo en una hoja de estilos, sigue funcionando)

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

Descendiente => cualquier elemento que desciende de un ancestro en particular (por ejemplo, Joe y su tatara-tatara-tatara-abuelo)

En la práctica: prueba este HTML:

 
Span 1. Span 2.
Span 1. Span 2.

con este CSS:

 span { color: red; } div.one span { color: blue; } div.two > span { color: green; } 

http://jsfiddle.net/X343c/1/

  div p 

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

  div> p 

Significa niños 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 en particular se pueden realizar atravesando el elemento dom [Ejemplo

Ejemplo

 .a .b .c .d{ background: #bdbdbd; } div>div>div>div:last-child{ background: red; } 
 
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
The fourth paragraph.