È possibile selezionare gli ultimi n elementi con nth-child?

130

Utilizzando un elenco standard, sto cercando di selezionare gli ultimi 2 elementi dell'elenco. Ho varie permutazioni di An+Bma nulla sembra selezionare gli ultimi 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 */

Sono a conoscenza di un nuovo selettore CSS3 come, :nth-last-child()ma preferirei qualcosa che funzioni in alcuni browser, se possibile (non mi interessa IE in particolare).

css css-selectors

— DisgruntledGoat
fonte

5

IE, nonostante, il supporto del browser :nth-last-child()è circa lo stesso :nth-child() di quirksmode.org . Inoltre, :nth-child()ed :nth-last-child()entrambi sono stati introdotti in CSS3, né è più vecchio o più nuovo in questo senso.

— BoltClock

Molti nth-childtrucchi utili sono riassunti da css-tricks

— m7913d

273

Questo selezionerà gli ultimi due iems di un elenco:

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>

Espandi frammento

— John Guise
fonte

Sì, ma stai utilizzando ciò :nth-last-child()che è già stato menzionato.

— BoltClock

6

(-n + 2) => Questo è quello che sto cercando. Grazie

— Surjith SM

16

Questa dovrebbe essere la risposta accettata, sì, l'ennesimo figlio è già stato menzionato, ma non esattamente come (-n + b) sia un bel trucco

— BlackTigerX,

56

nth-last-childsembra che sia stato progettato specificamente per risolvere questo problema, quindi dubito che esista un'alternativa più compatibile. Il supporto sembra abbastanza decente , però.

— Pekka
fonte

Grazie per il collegamento: sembra che il supporto per l'ennesimo figlio sia effettivamente lo stesso dell'ennesimo figlio (ero sicuro che IE8 supportasse l'ennesimo figlio, ma forse no).

— SconcertatoGoat

14

:nth-last-child(-n+2) dovrebbe fare il trucco

— Danyl Sobolev
fonte

1

A causa della definizione della semantica di nth-child, non vedo come ciò sia possibile senza includere la lunghezza dell'elenco degli elementi coinvolti. Il punto della semantica è consentire la segregazione di un gruppo di elementi figlio in gruppi ripetuti ( modifica - grazie a BoltClock) o in una prima parte di una lunghezza fissa, seguita da "il resto". In qualche modo vuoi l'opposto di quello, che è ciò che nth-last-childti dà.

— pointy
fonte

1

Con :nth-child()te puoi selezionare i primi melementi specificando :nth-child(-n+m).

— BoltClock

@BoltClock Ci penserò per un secondo ... oh, beh sì, hai ragione. Chiaramente non sono in grado di fare una dichiarazione seria su quale fosse l'intenzione del comitato quando ha inventato i selettori CSS3 :-)

— Pointy

-2

Se stai usando jQuery nel tuo progetto, o sei disposto a includerlo, puoi chiamare nth-last-childtramite la sua API di selezione (questo è simulato che attraverserà il browser). Ecco un link a un nth-last-childplugin. Se hai adottato questo metodo di targeting per gli elementi che ti interessavano:

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

E poi ridisegna la lastclasse invece dei selettori pseudo nth-childo nth-last-child, avrai un'esperienza cross browser più coerente.

— Nathan Anderson
fonte