¿Son "div> p" y "div p" iguales?

Question

Hola, tengo una pregunta obvia.

Para código como:

<div> 
    <p>We want to format this text :)</p> 
</div> 

Algunas personas utilizan el selector como:

div > p { 
    something 
} 

y otros:

div p { 
    something 
} 

¿Cuál es la diferencia en este caso? En mi opinión, ¿ninguno?

Y por cierto, ¿no es el elemento descendiente siempre un niño? ¿Cuál es la diferencia entre los dos? Estoy leyendo w3.org pero no puedo obtenerlo :)

¡Gracias!

Answer 1

simple:

div > p 

afecta sólo hijos directos.

div p 

afecta nietos, etc. grandgrandchildren también. (No hará una diferencia en su ejemplo)

El selector de niños isn't supported by IE6.

Answer 2

Pekka lo ha explicado en teoría en his answer. En función de su respuesta, y my answer to another question about the > combinator, daré una ilustración, modificada para abordar esta pregunta.

Considere el siguiente bloque de HTML y sus selectores de CSS de ejemplo. uso un ejemplo más elaborado para que yo pueda mostrar la diferencia entre ambos de sus selectores:

<div> 
    <p>The first paragraph.</p>     <!-- [1] --> 
    <blockquote> 
     <p>A quotation.</p>      <!-- [2] --> 
    </blockquote> 
    <div> 
     <p>A paragraph after the quotation.</p> <!-- [3] --> 
    </div> 
</div> 

Qué <p> s son seleccionados por qué selectores?

En primer lugar, todos ellos coincida div p porque son <p> elementos situados en cualquier lugar dentro de un elemento <div>.

Eso hace div > p más específica, la cual nos lleva a la siguiente pregunta:

Qué <p> s son seleccionados por div > p?

1. Seleccionado

   Este párrafo <p> es un niño, o un descendiente directo, de la más externa <div>. Eso significa que no está contenido inmediatamente por ningún otro elemento que no sea <div>. La jerarquía es tan simple como el selector describe, y como tal se selecciona por div > p.

2. No seleccionado

   Este <p> se encuentra en un elemento <blockquote>, y el elemento de <blockquote> se encuentra en la más externa <div>. La jerarquía sería por lo tanto tener este aspecto:

   div > blockquote > p 
   

   A medida que el párrafo está contenida directamente por un blockquote, es no seleccionados por div > p. Sin embargo, es puede coincidencia blockquote > p (en otras palabras, es un hijo del <blockquote>).

3. seleccionada

   Este párrafo vidas en el <div> interior, que está contenido por el exterior <div>. La jerarquía se vería así:

   div > div > p 
   

   No importa si hay más <div> s anidados unos dentro de otros, o incluso si los <div> s están contenidos por otros elementos. Siempre que este párrafo esté directamente contenido en su propio <div>, será seleccionado por div > p.