Apakah mungkin untuk memilih item terakhir dengan anak ke-n?

130

Menggunakan daftar standar, saya mencoba untuk memilih 2 item daftar terakhir. Saya memiliki berbagai permutasi An+Btetapi sepertinya tidak ada yang memilih 2 terakhir:

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

Saya mengetahui penyeleksi CSS3 baru seperti :nth-last-child()tetapi saya lebih suka sesuatu yang bekerja di beberapa browser jika memungkinkan (tidak peduli tentang IE khususnya).

css css-selectors

— DisgruntledGoat
sumber

5

Meskipun demikian, dukungan browser :nth-last-child()hampir sama dengan yang :nth-child() menurut quirksmode.org . Juga, :nth-child()dan :nth-last-child()keduanya diperkenalkan dalam CSS3, tidak ada yang lebih tua atau lebih baru dalam arti itu.

— BoltClock

Banyak nth-childtrik yang berguna dirangkum oleh trik-trik css

— m7913d

273

Ini akan memilih dua elemen terakhir dari daftar:

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>

Luaskan cuplikan

— John Guise
sumber

Ya tapi Anda menggunakan :nth-last-child()yang sudah disebutkan.

— BoltClock

6

(-n + 2) => Ini yang saya cari. Terima kasih

— Surjith SM

16

Ini harus menjadi jawaban yang diterima, ya, anak terakhir yang sudah disebutkan, tetapi tidak persis bagaimana (-n + b) trik yang keren

— BlackTigerX

56

nth-last-childKedengarannya seperti itu dirancang khusus untuk menyelesaikan masalah ini, jadi saya ragu apakah ada alternatif yang lebih kompatibel. Dukungannya terlihat lumayan .

— Pekka
sumber

Terima kasih atas tautannya - sepertinya dukungan n-child sebenarnya sama dengan nth-last-child (saya yakin IE8 mendukung nth-child tapi mungkin tidak).

— DisgruntledGoat

14

:nth-last-child(-n+2) harus melakukan trik

— Danyl Sobolev
sumber

1

Karena definisi semantik nth-child, saya tidak melihat bagaimana ini mungkin tanpa menyertakan panjang daftar elemen yang terlibat. Inti dari semantik adalah untuk memungkinkan pemisahan sekelompok elemen anak ke dalam kelompok berulang ( edit - terima kasih BoltClock) atau menjadi bagian pertama dari beberapa panjang tetap, diikuti oleh "sisanya". Anda semacam menginginkan kebalikan dari itu, yang nth-last-childmemberi Anda.

— Runcing
sumber

1

Dengan :nth-child()Anda dapat memilih melemen pertama dengan menentukan :nth-child(-n+m).

— BoltClock

@BoltClock Saya harus memikirkan itu sebentar ... oh, ya Anda benar tentang itu. Jelas saya tidak dalam posisi untuk membuat pernyataan serius tentang apa tujuan komite ketika menemukan penyeleksi CSS3 :-)

— Pointy

-2

Jika Anda menggunakan jQuery di proyek Anda, atau bersedia memasukkannya, Anda dapat menelepon nth-last-childmelalui API pemilihnya (ini disimulasikan ini akan melewati browser). Berikut ini tautan ke sebuah nth-last-childplugin. Jika Anda menggunakan metode penargetan elemen yang Anda minati:

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

Dan kemudian gaya lagi lastkelas bukan nth-childatau nth-last-childsemu penyeleksi, Anda akan memiliki jauh lebih konsisten pengalaman lintas browser.

— Nathan Anderson
sumber