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

html css css-selectors

— 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

"¿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

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

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

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.

:nth-child Soporte de navegador

Mostrar fragmento de código

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

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

Expandir fragmento

— kapa
fuente

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

— rsplak