Selectores CSS Child vs Descendant


298

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?


He tratado de explicar aquí en detalle, puede referirse sólo en caso si es útil para cualquiera ...
El señor extranjero

Respuestas:


468

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.

49
Una nota importante es que un selector secundario será más rápido que el selector descendiente, lo que puede tener un efecto visible en páginas con miles de elementos DOM.
Jake Wilson

Buena respuesta, pero simplemente agregaría respuestas directas a sus ejemplos en la pregunta también, solo para dejarlo ridículamente claro.
JoeCool


23

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.


La sección "Importante" que agregó completa esta respuesta. ¡Gracias!
Aakash Verma

10

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/


Interesante del navegador que probado, ya que parece que el trabajo hecho
halb Yoel

3
Para su información, CSS en respuesta no coincide con CSS en JSFiddle ( rede blueintercambiado).
Pang

7

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)


Estoy pensando que uso eso en CSS. pero en jquery detecto si el navegador es ie6 (en jquery ¿puedo hacer esto o necesito usar <! - [if IE 6]>) y agrego una clase
iceangel89

2
jquery sí cuenta con el rastreo en lugar del rastreo del navegador, por lo que no creo que pueda detectar si el navegador es ie6. Y no deberías. Lo mejor es incluir una hoja de estilo adicional para ie6 con comentarios condicionales como los que usted describió.
rlovtang

4
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'


-1

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.