Aplicando último hijo elemento no funciona

Dadas Tengo las siguientes etiquetas:Aplicando último hijo elemento no funciona

<div id="div-one"> 
    <div class="div-two">some </div> 
    <input type="hidden" value=""/> 
    <div class="div-two">some </div> 
    <input type="hidden" value=""/> 
    <div class="div-two">some </div> 
    <input type="hidden" value=""/> 
</div>

Cuando trato de aplicar un estilo al último elemento "div-dos", con esta sintaxis CSS:

#div-one div.div-two:last-child { border-bottom:solid 1px #999; }

Esto no funciona a menos que se quita los campos ocultos. ¿Alguna sugerencia de por qué?

Aquí hay un enlace a la jsFiddle: http://jsfiddle.net/67qYJ/1/
El uso de Google Chrome v12.0.742.100
Es NO una opción para colocar las etiquetas ocultas en otras partes

Fuente

2011-06-23 Coderama

¿Puedo preguntar qué navegador (s) que prueba esta en? –

¿Qué navegador y versión estás probando? ': last-child' tiene menos soporte que': first-child', creo que es un selector de CSS3. – alex

@alex: Yeeeeep. – BoltClock

Sus doesn selector No funciona para su marcado actual porque el último hijo es input, no a div.div-two.

¿El div#div-one solo va a contener esos dos tipos de elementos? Si es así, puede utilizar :last-of-type lugar, que recoge el último div (aunque independientemente de su clase):

#div-one div:last-of-type { border-bottom:solid 1px #999; }

Sin embargo, si sus interiores div elementos tienen otras clases además .div-two, será bastante difícil elegir la última .div-two elemento. Su código dado lo hace fácil porque div y input son tipos de elementos distintos y solo la clase .div-two está presente.

Fuente

2011-06-24 06:23:34 BoltClock

¡Lo has clavado! ¡Gracias!Así que terminé usando el: último-de-tipo pero para el selector de clase que parece funcionar. – Coderama

@Coderama: tenga cuidado, ya que la familia ': nth-of-type' solo mira el tipo de elemento (el nombre que ve en sus etiquetas HTML). Agregar selectores de clase simplemente reduce la selección. Si no agrega un selector de tipo como 'div', seleccionará cualquier elemento que sea el último de su tipo. – BoltClock

Si no puede usar last-of-type como @BoltClock sugirió que podría agregar una segunda clase al último .div-two en el grupo.

http://jsfiddle.net/watss/

<div class="div-two last">some </div>

#div-one > .div-two.last { border-bottom:1px solid; background:yellow; }

o mejor aún

#div-one > .last { border-bottom:1px solid; background:yellow; }

Fuente

2011-06-24 06:48:12

Aplicando último hijo elemento no funciona

Respuesta

Cuestiones relacionadas