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

Jawaban:

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