Selectores CSS hijo vs descendiente

Resuelto iceangel89 asked hace 15 años • 9 respuestas

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¿seguirá seleccionado?

Luego el selector de niños :

div > p

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

<div><p>

vs

<div><div><p>

¿Serán ambos seleccionados o no?

iceangel89 avatar Jul 25 '09 21:07 iceangel89
Aceptado

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

  • Mi hija es a la vez mi hija y mi descendiente.
  • Mi nieta no es mi hija, pero es mi descendiente.
RichieHindle avatar Jul 25 '2009 14:07 RichieHindle

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 descendiente y el segundo se llama selector secundario .

Çağdaş Tekin avatar Jul 25 '2009 14:07 Çağdaş Tekin

Bascailly, " ab " selecciona todos los b dentro de a, mientras que " a>b " selecciona los b que son hijos únicos de a , no seleccionará b que es hijo de b 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>

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

Ignas2526 avatar Jan 23 '2013 22:01 Ignas2526

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

Snowcrash avatar May 22 '2014 22:05 Snowcrash

Tenga en cuenta que el selector secundario no es compatible con Internet Explorer 6. (Si usa el selector en un selector jQuery/Prototype/YUI, etc. en lugar de en una hoja de estilo, aún funciona)

rlovtang avatar Jul 25 '2009 14:07 rlovtang