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

Utilizzando un elenco standard, sto provando a selezionare gli ultimi 2 elementi dell'elenco. Ho varie permutazioni di An+B ma nulla sembra selezionare l'ultimo 2:È possibile selezionare gli ultimi n elementi 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 */

Sono a conoscenza di nuovi selettori CSS3 come :nth-last-child() ma preferirei qualcosa che funziona in pochi altri browser, se possibile (non importa particolarmente di IE).

fonte

2011-01-30 DisgruntledGoat

IE nonostante, il supporto del browser per ': nth-last-child () 'è lo stesso di': nth-child() '[secondo quirksmode.org] (http://www.quirksmode.org/css/contents.html#t38). Inoltre, ': nth-child()' e ': nth-last-child()' sono stati entrambi introdotti in CSS3, nessuno dei due è più vecchio o più recente in tal senso. – BoltClock

nth-last-child suona come se fosse specificamente progettato per risolvere questo problema, quindi dubito che esista un'alternativa più compatibile. Supporto sembra pretty decent, però.

fonte

2011-01-30 17:55:08

Grazie per il link - sembra che l'n-child-support sia in realtà lo stesso di nth-last-child (ero sicuro che IE8 supportasse nth-child ma forse no). – DisgruntledGoat

@DisgruntledGoat L'ho pensato anch'io, ma a quanto pare non ... –

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

fonte

2011-01-30 17:57:05 Pointy

Con ': nth-child()' puoi selezionare i primi elementi 'm' specificando': nth-child (-n + m) ' . – BoltClock

@BoltClock Dovrò pensarci per un secondo ... oh, beh sì, hai ragione su questo. Chiaramente non sono in grado di esprimere seriamente quale fosse l'intenzione del comitato quando inventavo i selettori CSS3 :-) – Pointy

-2

Se si sta utilizzando jQuery nel progetto, o sono disposti a includere lo si può chiamare nth-last-child attraverso la propria API di selezione (questo è questo simulato che attraverserà browser). Here is a link a un plug-in nth-last-child. Se hai preso questo metodo di colpire gli elementi che erano interessati a:

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

E poi lo stile di nuovo la classe invece dei nth-child o nth-last-child pseudo selettori last, si avrà una molto più coerente esperienza cross browser.

fonte

2011-01-30 18:02:30

Ho provato questo e non funziona in IE8. – bobber205

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

174

Questo selezionerà gli ultimi due iems di 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>

fonte

2011-06-30 23:29:42

Sì, ma stai usando ': nth-last-child()' che è già stato menzionato. – BoltClock

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

+13

Questa dovrebbe essere la risposta accettata, sì, nth-last-child è già stato menzionato, ma non esattamente come (-n + b) è un bel trucco – BlackTigerX

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

fonte

2012-07-16 15:27:21

': nth-last-child()' è già stato menzionato un poche volte ... – BoltClock

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

risposta

Problemi correlati