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

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