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

Usando una lista estándar, estoy tratando de seleccionar los 2 últimos elementos de la lista. Tengo varias permutaciones de An+B pero nada parece para seleccionar el último 2:¿Es posible seleccionar los últimos n elementos con nth-child?

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 nueva selectores CSS3 como :nth-last-child() pero preferiría algo que funciona en unos pocos más navegadores, si es posible (no me importa IE especialmente).

Fuente

2011-01-30 DisgruntledGoat

IE no obstante, el apoyo del navegador para ': nth-last-child () 'es casi lo mismo que': nth-child() '[de acuerdo con quirksmode.org] (http://www.quirksmode.org/css/contents.html#t38). Además, ': nth-child()' y ': nth-last-child()' se introdujeron en CSS3, ninguno es más antiguo o más nuevo en ese sentido. – BoltClock

nth-last-child parece que fue diseñado específicamente para resolver este problema, por lo que dudo si hay una alternativa más compatible. Sin embargo, el soporte parece pretty decent.

Fuente

2011-01-30 17:55:08

Gracias por el enlace: parece que la compatibilidad con nth-child es en realidad lo mismo que nth-last-child (estaba seguro de que IE8 era compatible con nth-child pero quizás no). – DisgruntledGoat

@DisgruntledGoat Lo pensé, pero aparentemente no ... –

Debido a la definición de la semántica de nth-child, no veo cómo esto es posible sin incluir la longitud de la lista de elementos implicados. El objetivo de la semántica es permitir la segregación de un grupo de elementos secundarios en grupos repetitivos (edit - gracias BoltClock) o en una primera parte de cierta longitud fija, seguido de "el resto". Usted quiere algo así como lo contrario de eso, que es lo que nth-last-child le da.

Fuente

2011-01-30 17:57:05 Pointy

Con ': nth-child()' puedes seleccionar los primeros elementos 'm' especificando ': nth-child (-n + m)' . – BoltClock

@BoltClock Voy a tener que pensar en eso por un momento ... oh, sí, tienes razón en eso. Claramente, no estoy en posición de hacer una declaración seria sobre cuál fue la intención del comité al inventar los selectores de CSS3 de todos modos :-) – Pointy

-2

Si está utilizando jQuery en su proyecto, o está dispuesto a incluirlo, puede llamar al nth-last-child a través de su API de selección (esto simula que cruzará el navegador). Here is a link a un nth-last-child complemento. Si tomó este método para dirigir los elementos que se interesaron en:

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

Y luego otra vez el estilo de la clase en lugar de los nth-child o seudo nth-last-childlast selectores, que tendrá una experiencia mucho más consistente navegadores.

Fuente

2011-01-30 18:02:30

Intenté esto y no funciona en IE8. – bobber205

http://jsbin.com/AhECUP/1 – bobber205

174

Esto seleccionará los dos últimos 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> 
 
</ul>

Fuente

2011-06-30 23:29:42

Sí, pero estás usando ': nth-last-child()' que ya se ha mencionado. – BoltClock

(-n + 2) => Esto es lo que estoy buscando. Gracias –

+13

Esta debería ser la respuesta aceptada, sí, nth-last-child ya fue mencionado, pero no exactamente cómo (-n + b) es un buen truco – BlackTigerX

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

Fuente

2012-07-16 15:27:21

': nth-last-child()' ya se ha mencionado pocas veces... – BoltClock

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

Respuesta

Cuestiones relacionadas