CSS anak terakhir (-1)

161

Saya mencari pemilih css yang memungkinkan saya memilih daftar anak pra-terakhir.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

Metode statis:

ul li:nth-child(5)

Metode dinamis:

ul li:last-child(-1)

yang tentu saja tidak memvalidasi, juga nth-last-child sepertinya tidak menyediakan cara yang dinamis .. Saya dapat mundur ke javascript tapi saya bertanya-tanya apakah ada cara css yang saya abaikan

css css-selectors Hedde van der Heide
sumber
11
Ini biasanya disebut "kedua terakhir". Ada juga kata lain untuk itu: "kedua dari belakang".
BoltClock
2
@BoltClock Saya suka kata "penultimate". Saya akan menggunakannya dalam pembaruan Facebook yang sombong, sekarang.
Andrew Barber
3
Kemungkinan duplikat dari Pilih elemen terakhir kedua dengan css
Castro Roy
2
Terima kasih kepada semua orang yang menyebutkan kedua dari belakang - ini muncul # 1 di Google untuk "css kedua dari belakang".
chakeda

Jawaban:

303

Anda bisa menggunakan :nth-last-child(); sebenarnya, selain :nth-last-of-type()saya tidak tahu apa lagi yang bisa Anda gunakan. Saya tidak yakin apa yang Anda maksud dengan "dinamis", tetapi jika Anda maksudkan apakah gaya tersebut berlaku untuk anak terakhir kedua yang baru ketika lebih banyak anak ditambahkan ke daftar, ya itu akan berlaku. Biola interaktif.

ul li:nth-last-child(2)
BoltClock
sumber
Oke itu berhasil! Penerjemah kode (jsfiddle) tidak memvalidasi itu .. Tebak bug di pihak mereka! terima kasih
Hedde van der Heide
4
@ David Allen: Saya tidak berpikir dia peduli jika dia sudah mencoba menggunakan :nth-child(5)dan :last-child. Komentar seperti ini harus masuk ke pertanyaan atau disimpan sendiri.
BoltClock
1
Dia mungkin tidak tahu tentang masalah tidak ada dukungan. Saya hanya menyorotnya .... Saya memberikan jawaban menggunakan jQuery dan saya akan senang mengatakan bahwa itu tidak akan berfungsi dengan pengguna dengan menonaktifkan JavaScript. tetapi lebih banyak orang menggunakan IE7 / 8 daripada mengaktifkan JS
David Allen
1
@ David, saya percaya plugin selectivrz atau modernizr dapat memperbaiki masalah itu, saya harus melihat dokumen
Hedde van der Heide
@ArgsKwargs Komentar Hebat tidak pernah mendengar selectivizr. Beri tahu kami jika memang mendukung anak terakhir
David Allen
1

Kecuali Anda bisa mendapatkan PHP untuk memberi label elemen itu dengan kelas, Anda lebih baik menggunakan jQuery.

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});
David Allen
sumber
6
Sangat menjengkelkan karena jQuery tidak menerapkan :nth-last-child()hanya karena John berpikir tidak ada yang menggunakannya .
BoltClock
Saya lebih suka label dengan python ;-) ontopic: Yah css sepertinya baik-baik saja dengan cara ini, mungkin jsfiddle juga berpikir tidak ada yang menggunakannya :-)
Hedde van der Heide
@ArgsKwargs: Aneh mengapa itu tidak bekerja di jsFiddle. Terserah browser untuk menafsirkannya; tidak memiliki mesin CSS sendiri.
BoltClock
@BoltClock jangan salah paham, berfungsi, pembantu kode (visualisasi warna) hanya menunjukkan sesuatu yang tidak tertutup (jadi saya bahkan tidak mencoba)
Hedde van der Heide
Saya tidak berpikir salah satu kode tidak tertutup. Tetapi saya tahu apa yang Anda maksud tentang "visualisasi warna"
David Allen