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
css
css-selectors
Hedde van der Heide
fuente
fuente
Respuestas:
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.fuente
:nth-child(5)
y:last-child
. Comentarios como este deberían ir a la pregunta o mantenerse en secreto.A menos que pueda hacer que PHP etiquete ese elemento con una clase, es mejor usar jQuery.
fuente
:nth-last-child()
solo porque John cree que nadie lo usa .