CSS último hijo (-1)

161

Estoy buscando un selector de CSS que me permita seleccionar el último hijo de la lista.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

Método estático:

ul li:nth-child(5)

Método dinámico:

ul li:last-child(-1)

que, por supuesto, no valida, también el enésimo último hijo no parece proporcionar una forma dinámica ... Puedo recurrir a JavaScript pero me pregunto si hay una forma css que pasé por alto

Hedde van der Heide
fuente
11
Generalmente se llama "penúltimo". También hay otra palabra elegante para ello: "penúltimo".
BoltClock
2
@BoltClock Me encanta la palabra "penúltimo". Voy a usarlo en una actualización sarcástica de Facebook, ahora.
Andrew Barber
3
Posible duplicado de Seleccionar el segundo último elemento con CSS
Castro Roy
2
Gracias a todos los que mencionaron penúltimo: este apareció en el # 1 en Google por "penúltimo css".
chakeda

Respuestas:

303

Usted puede utilizar :nth-last-child(); de hecho, además :nth-last-of-type()no sé qué más podrías usar. No estoy seguro de lo que quiere decir con "dinámico", pero si quiere decir si el estilo se aplica al nuevo penúltimo hijo cuando se agregan más hijos a la lista, sí. Violín interactivo.

ul li:nth-last-child(2)
BoltClock
fuente
Ok, eso funciona! El intérprete de código (jsfiddle) no lo validó ... ¡Adivina un error de su lado! gracias
Hedde van der Heide
44
@David Allen: No creo que le importe si ya está tratando de usar :nth-child(5)y :last-child. Comentarios como este deberían ir a la pregunta o mantenerse en secreto.
BoltClock
1
Es posible que no sepa sobre el problema de falta de soporte. Solo lo estoy resaltando ... Di una respuesta usando jQuery y me alegrará decir que no funcionará con usuarios con JavaScript deshabilitado. pero más personas usan IE7 / 8 que tener JS diabled
David Allen
1
@David, creo que el complemento selectivrz o modernizr puede solucionar ese problema, tendré que ver los documentos
Hedde van der Heide
@ArgsKwargs Gran comentario nunca escuché sobre selectivizr. Háganos saber si admite nth-last-child
David Allen
1

A menos que pueda hacer que PHP etiquete ese elemento con una clase, es mejor usar jQuery.

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});
David Allen
fuente
66
Es completamente molesto que jQuery no se implemente :nth-last-child()solo porque John cree que nadie lo usa .
BoltClock
Prefiero etiquetar con python ;-) onópico: Bueno, CSS parece estar bien de esta manera, tal vez jsfiddle también cree que nadie lo usa :-)
Hedde van der Heide
@ArgsKwargs: Extraño por qué no funcionaría en jsFiddle. Depende del navegador interpretarlo; no tiene su propio motor CSS.
BoltClock
@BoltClock no me malinterpreten, funciona, el código auxiliar (visualización en color) solo indica algo no cerrado (por lo que ni siquiera lo intenté)
Hedde van der Heide
No creo que ninguno de los códigos esté sin cerrar. Pero sé lo que quieres decir con la "visualización del color"
David Allen