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

130

Usando una lista estándar, estoy tratando de seleccionar los últimos 2 elementos de la lista. Tengo varias permutaciones de, An+Bpero nada parece seleccionar los últimos 2:

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 */

Conozco un nuevo selector CSS3 como, :nth-last-child()pero preferiría algo que funcione en algunos navegadores más si es posible (no me importa particularmente IE).

css css-selectors

— Cabra descontento
fuente

55

A pesar de IE, el soporte del navegador :nth-last-child()es casi el mismo que :nth-child() según quirksmode.org . Además, :nth-child()y :nth-last-child()ambos se introdujeron en CSS3, ninguno es más antiguo o más nuevo en ese sentido.

— BoltClock

Muchos nth-childtrucos útiles se resumen en css-tricks

— m7913d

273

Esto seleccionará los dos últimos ítems 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>

Expandir fragmento

— John Guise
fuente

Sí, pero está utilizando lo :nth-last-child()que ya se ha mencionado.

— BoltClock

66

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

— Surjith SM

16

Esta debería ser la respuesta aceptada, sí, nth-last-child ya se mencionó, pero no exactamente cómo (-n + b) es un truco genial

— BlackTigerX

56

nth-last-childParece 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 bastante decente .

— Pekka
fuente

Gracias por el enlace: parece que el soporte para nth-child es en realidad lo mismo que nth-last-child (estaba seguro de que IE8 era compatible con nth-child pero tal vez no).

— DisgruntledGoat

14

:nth-last-child(-n+2) debería hacer el truco

— Danyl Sobolev
fuente

1

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 involucrados. El objetivo de la semántica es permitir la segregación de un grupo de elementos secundarios en grupos repetidos ( editar - gracias BoltClock) o en una primera parte de cierta longitud fija, seguido de "el resto". Como que quieres lo contrario de eso, que es lo nth-last-childque te da.

— Puntiagudo
fuente

1

Con :nth-child()usted puede seleccionar los primeros melementos especificando :nth-child(-n+m).

— BoltClock

@BoltClock Voy a tener que pensar en eso por un segundo ... oh, bueno, sí, tienes razón en eso. Claramente, no estoy en condiciones de hacer un pronunciamiento serio sobre cuál era la intención del comité al inventar selectores CSS3 de todos modos :-)

— Pointy

-2

Si está utilizando jQuery en su proyecto, o está dispuesto a incluirlo, puede llamar a nth-last-childtravés de su API de selección (esto es simulado, cruzará el navegador). Aquí hay un enlace a un nth-last-childcomplemento. Si tomó este método de segmentación de los elementos que le interesaban:

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

Y luego de nuevo estilo de la lastclase en lugar de los nth-childo nth-last-childseudo selectores, que tendrán una experiencia transversal navegador mucho más consistente.

— Nathan Anderson
fuente