Czy można wybrać ostatnie n pozycji z n-tym dzieckiem?

131

Korzystając z listy standardowej, próbuję wybrać ostatnie 2 elementy listy. Mam różne permutacje, An+Bale nic nie wydaje się wybierać ostatnich 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 */

Jestem świadomy nowych selektorów CSS3, takich jak, :nth-last-child()ale wolałbym coś, co działa w kilku innych przeglądarkach, jeśli to możliwe (nie obchodzi mnie szczególnie IE).

css css-selectors Niezadowolony Kozioł
źródło
5
Niezależnie od IE, wsparcie dla przeglądarek :nth-last-child()jest mniej więcej takie samo, jak :nth-child() w quirksmode.org . Ponadto, :nth-child()i :nth-last-child()oba zostały wprowadzone w CSS3, nie są starsze ani nowsze w tym sensie.
BoltClock
Wiele przydatnych nth-childtrików zostało podsumowanych w css-tricks
m7913d

Odpowiedzi:

281

Spowoduje to wybranie dwóch ostatnich iem z listy:

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>
Rozwiń fragment

John Guise
źródło
Tak, ale używasz tego, o :nth-last-child()którym już wspomniano.
BoltClock
6
(-n + 2) => To jest to, czego szukam. Dzięki
Surjith SM,
16
To powinna być akceptowana odpowiedź, tak, n-te-ostatnie-dziecko zostało już wspomniane, ale nie do końca, jak (-n + b) jest fajną sztuczką
BlackTigerX
Niesamowite! Dziękuję Ci!
Julian
56

nth-last-childwygląda na to, że został specjalnie zaprojektowany do rozwiązania tego problemu, więc wątpię, czy istnieje bardziej kompatybilna alternatywa. Wsparcie wygląda jednak całkiem przyzwoicie .

Pekka
źródło
Dzięki za link - wygląda na to, że alimenty na nth-child są w rzeczywistości takie same jak nth-last-child (byłem pewien, że nth-child obsługuje IE8, ale może nie).
DisgruntledGoat
14

:nth-last-child(-n+2) powinien załatwić sprawę

Danyl Sobolev
źródło
1

Ze względu na definicję semantyki nth-childnie widzę, jak jest to możliwe bez uwzględnienia długości listy elementów, których to dotyczy. Celem semantyki jest umożliwienie segregacji paczki elementów potomnych na powtarzające się grupy ( edytuj - dzięki BoltClock) lub na pierwszą część o określonej długości, a następnie „resztę”. W pewnym sensie chcesz czegoś przeciwnego, co nth-last-childci daje.

Spiczasty
źródło
1
Za pomocą :nth-child()możesz wybrać pierwsze melementy, określając :nth-child(-n+m).
BoltClock
@BoltClock Będę musiał się nad tym zastanowić przez chwilę ... no cóż, tak, masz rację. Najwyraźniej nie jestem w stanie wygłosić poważnego oświadczenia na temat intencji komitetu podczas wymyślania selektorów CSS3 :-)
Pointy
-2

Jeśli używasz jQuery w swoim projekcie lub chcesz go dołączyć, możesz wywołać go nth-last-childza pomocą jego interfejsu API selektora (jest to symulowane, że będzie przechodzić przez przeglądarkę). Oto link do nth-last-childwtyczki. Jeśli wybrałeś tę metodę kierowania na elementy, które Cię interesowały:

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

A potem ponownie laststylizuj klasę zamiast nth-childlub nth-last-childpseudoselektorów, będziesz mieć znacznie bardziej spójne działanie w różnych przeglądarkach.

Nathan Anderson
źródło