Seleccione el segundo último elemento con css

135

Ya sé de: último hijo. Pero, ¿hay alguna manera de seleccionar el div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

NOTA: sin jQuery, solo con CSS

dinámica
fuente
¿Seguramente hay alguna lógica de por qué el penúltimo hijo es significativo?
David Tang
Sí, necesito seleccionar el último y el último último para aplicar algunos estilos
dinámico
¿por qué no puedes simplemente poner una clase en el segundo último div?
Daveo
3
"¿por qué no puedes simplemente poner una clase en el 2do último div": quizás si llegas al estilo de contenido que se está generando, en el que no tienes acceso (fácil) para agregar una clase al segundo último elemento?
Henrik

Respuestas:

271

En CSS3 tienes:

:nth-last-child(2)

Ver: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

Soporte del navegador nth-last-child :

  • Cromo 2
  • Firefox 3.5
  • Opera 9.5, 10
  • Safari 3.1, 4
  • Internet Explorer 9
Z escarchado
fuente
1
Este es probablemente el camino a seguir a menos que pueda adjuntar una clase al div que está tratando de seleccionar. Como Frosty ha mencionado, CSS3 no es compatible con navegadores antiguos o IE. Jquery es una opción mucho mejor si le preocupa la computabilidad entre navegadores.
Thomas
Era una copia / pegar del artículo vinculado ... Respuesta editada, gracias.
Frosty Z
1
solución en css: #container>: nth-last-child (2) {background: red;} Verifique este codepen para verlo en vivo: codepen.io/marc_dahan/pen/JyxObz
marcdahan
Ahora que no necesitamos admitir IE anteriores, esta respuesta funcionará perfectamente. Honestamente, si las personas todavía usan IE 8 y versiones anteriores, no merecen tener cosas bonitas.
Stender
59

Nota: Publiqué esta respuesta porque OP declaró más tarde en los comentarios que necesita seleccionar los dos últimos elementos , no solo el penúltimo.


¡El :nth-childselector CSS3 es de hecho más capaz de lo que alguna vez imaginaste!

Por ejemplo, esto seleccionará los últimos 2 elementos de #container:

#container :nth-last-child(-n+2) {}

Pero esto es solo el comienzo de una hermosa amistad.

kapa
fuente
Agradable, mi respuesta solo selecciona el último hijo menos 1. No sabía sobre esto. + 'd
rsplak