2008-09-09 16 views
10

Decir que tengo una lista de la siguiente manera:¿Hay alguna forma de seleccionar el último elemento de una lista con CSS?

  • elemento1
  • elemento2
  • elemento3

¿Hay un selector CSS que me permitirá seleccionar directamente el último elemento de una lista? En este caso, elemento 3.

¡Salud!

+0

Me encontré con el selector li: último-hijo anterior; sin embargo, no puedo usarlo ya que no funciona en IE. En este caso, no tengo control sobre el HTML, por lo que no puedo etiquetar el primero y el último hijo en consecuencia. – Marcel

+0

En ese caso, me temo que no conseguirás que haga lo que quieres. Podrías hacerlo con javascript si tienes control sobre eso y quieres ir por ese camino, pero es un camino oscuro y aterrador con dragones;) –

+0

La respuesta correcta a partir del soporte de navegador en 2013 es por OZZIE. La respuesta obsoleta es por Glenn Slaven. – gorbysbm

Respuesta

15

No es que yo sepa. La solución tradicional es etiquetar los primeros & últimos elementos con class = "first" & class = "last" para que pueda identificarlos.

La psudo-clase CSS first-child le proporcionará el primer elemento, pero no todos los navegadores lo admiten. CSS3 tendrá last-child too (actualmente es compatible con Firefox, Safari pero no con IE 6/7/beta 8)

6

Hasta que esté correctamente soportado, deberá agregar una clase a los "últimos" elementos, según lo sugerido. Sin embargo, no tienes que hacer esto manualmente. Si usted puede tomar un golpe javascript, echar un vistazo a cualquiera:

Cualquiera de los dos evite 'contaminar' su marcado, y son perfectamente aceptables si su estilo es una 'buena adición' en comparación con una característica de diseño 'imprescindible'.

+0

Esto parece ser el caso si está buscando soporte de plataforma X. –

+0

¡Funcionó el segundo enlace "Keeping Your ..."! –

+0

+1 para referencia de jQuery. Si no controla el marcado, como es el caso en muchos ejercicios de diseño de plantilla/producto, esta es realmente la única (y más fácil) forma de éxito con una amplia compatibilidad con x-navegadores. – cdonner

3

¡La respuesta para esta pregunta debe actualizarse! IE9 + Firefox (hace un tiempo atrás) + Chrome, Safari todo el soporte: last-of-type o last-child

Cuestiones relacionadas