51 votos

¿Es posible seleccionar los últimos n elementos con nth-child?

Usando una lista normalizada, estoy tratando de seleccionar los últimos elementos de la 2 lista. Tengo varias permutaciones de An+B pero nada parece seleccionar los 2 últimos:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Soy consciente de una nuevos selectores de CSS3 como :nth-last-child() pero prefiero algo que funcione en algunos navegadores más de si es posible (no se preocupan por IE particular).

92voto

John Guise Puntos 341

Esto seleccionará el dos últimas iems de una lista:

li:nth-last-child(-n+2) {color:red;}


<ul>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
</ul>

33voto

Pekka 웃 Puntos 249607

nth-last-childsuena como que fue diseñado específicamente para resolver este problema, por lo que dudo si existe una alternativa más compatible. Apoyo se ve bastante decente, aunque.

6voto

Danyl Sobolev Puntos 31

:nth-last-child(-n+2)debe hacer el truco

1voto

Pointy Puntos 172438

Debido a la definición de la semántica de los nth-child , no veo cómo esto es posible sin incluir la longitud de la lista de elementos que intervienen. El punto de la semántica es permitir la segregación de un montón de niños elementos en grupos (Editar - gracias BoltClock) repetidos o en una primera parte de longitud fija, seguida por "el resto". Especie de desea lo contrario de eso, que es lo que nth-last-child le da.

0voto

Nathan Anderson Puntos 4366

Si usted está usando jQuery en tu proyecto, o están dispuestos a incluir se puede llamar a nth-last-child a través de su selector de API (esto es simulado se cruzará en el navegador). Aquí hay un enlace a un nth-last-child plugin. Si usted tomó este método de orientación de los elementos que estaban interesados en:

$('ul li:nth-last-child(1)').addClass('last');

Y luego el estilo de nuevo el last de la clase en lugar de la nth-child o nth-last-child pseudo selectores, usted tendrá una mucho más consistente de la cruz de experiencia de navegador.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X