Menggunakan pemilih anak terakhir

106

Tujuan saya adalah menerapkan CSS di bagian terakhir li, tetapi tidak melakukannya.

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
    	<ul id="nav">
    		<li><a id="abc" href="#">abcde</a></li>
    		<li><a id="def" href="#">xyz</a></li>
    	</ul>
    </div>
Luaskan cuplikan

Bagaimana saya bisa memilih hanya anak terakhir?

css css-selectors Miral
sumber

Jawaban:

171

The :last-childpseudoclass masih tidak dapat dipercaya digunakan di seluruh browser. Secara khusus, Internet Explorer versi <9, dan Safari <3,2 pasti tidak mendukungnya , meskipun Internet Explorer 7 dan Safari 3.2 melakukan dukungan:first-child , rasa ingin tahu.

Taruhan terbaik Anda adalah secara eksplisit menambahkan kelas last-child(atau serupa) ke item itu, dan menerapkannya li.last-childsebagai gantinya.

VoteyDisciple
sumber
46
IE8 juga tidak mendukung :last-child. Dan itu tidak terlalu aneh. :first-childadalah pseudo-class CSS2, pseudo-class :last-childCSS3.
mercator
92
last-child berfungsi di semua browser modern, yang berarti, tentu saja, ini tidak berfungsi di versi IE mana pun.
Rob
25
Perlu diketahui, IE 9 mendukung:last-child .
Jari Keinänen
6
@mercator Anehnya: first-child diimplementasikan di CSS2 tetapi: last-child dibiarkan sampai CSS3 ... tampaknya cukup jelas untuk menambahkannya pada saat yang sama.
Cobby
21
IE7 menolak untuk mengenali anak
Dewayne
76

Solusi lain yang mungkin berhasil untuk Anda adalah membalikkan hubungan. Jadi Anda akan mengatur perbatasan untuk semua item daftar. Anda kemudian akan menggunakan first-child untuk menghilangkan border untuk item pertama. Anak pertama didukung secara statis di semua browser (artinya tidak dapat ditambahkan secara dinamis melalui kode lain, tetapi anak pertama adalah pemilih CSS2, sedangkan anak terakhir ditambahkan dalam spesifikasi CSS3)

Catatan: Ini hanya berfungsi seperti yang Anda inginkan jika Anda hanya memiliki 2 item dalam daftar seperti contoh Anda. Item ketiga dan seterusnya akan memiliki batas yang diterapkan padanya.

Branden Silva
sumber
2
+1 untuk pemikiran di luar kotak :-) Saya baru saja mengonversi elemen anak terakhir saya menjadi anak pertama dan diubah oleh batas kanan ke kiri tepi untuk pemisah menu. Sekarang IE8 menyukai css saya.
Scott B
43

Jika Anda merasa dapat menggunakan Javascript, maka karena dukungan jQuery last-child, Anda dapat menggunakan metode css jQuery dan hal baiknya akan mendukung hampir semua browser

Kode Contoh:

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

Anda dapat menemukan info lebih lanjut tentang di sini: http://api.jquery.com/css/#css2

Tarik
sumber
8
Bicara tentang kotor.
md1337
95
Lebih baik melakukan hal seperti itu $("#nav li:last-child").addClass('last-child')agar Anda dapat mempertahankan gaya Anda di lembar gaya.
jason
Ini lebih bersih daripada solusi pertama karena ditangani secara otomatis. Tapi saya setuju dengan jason juga.
Josh M.
1
Sebenarnya, IE7 tidak memuat kelas yang memiliki div:last-childdan div.last-child. Tampaknya itu menganggap :last-childsintaks tidak valid dan kelas apa pun dengan pseudo-selector tidak akan diterapkan.
Josh M.
@ Josh M .: Itu benar dan perilaku yang diharapkan. Sangat disayangkan, menurut saya. Anda harus menduplikasi aturan tersebut.
BoltClock
19

Jika jumlah item daftar tetap, Anda dapat menggunakan pemilih yang berdekatan, misalnya jika Anda hanya memiliki tiga <li>elemen, Anda dapat memilih yang terakhir <li>dengan:

#nav li+li+li {
    border-bottom: 1px solid #b5b5b5;
}
ccpizza
sumber
3
Pemilih Anda salah. li + #nav limemilih libagian dalam #navyang muncul setelahnya li. Selektor Anda seharusnya begitu #nav li + li + li.
BoltClock
1
Itu bagus. Bekerja dengan baik di IE8, namun tidak di IE7.
Mateng
13

Jika Anda sering menginginkan pemilih CSS3, Anda selalu dapat menggunakan pustaka selectivizr di situs Anda:

http://selectivizr.com/

Ini adalah skrip JS yang menambahkan dukungan untuk hampir semua pemilih CSS3 ke browser yang tidak mendukung mereka.

Lemparkan ke <head>tag Anda dengan persyaratan IE:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
nzifnab.dll
sumber
0

Sebagai alternatif untuk menggunakan kelas, Anda bisa menggunakan daftar mendetail, menyetel elemen anak dt untuk memiliki satu gaya dan elemen anak dd memiliki gaya yang lain. Contoh Anda akan menjadi:

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

html:

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

Tidak ada metode yang lebih baik dari yang lain dan itu hanya tergantung pada preferensi pribadi.

lexx
sumber
0

Cara lain untuk melakukannya adalah menggunakan pemilih anak-terakhir di jQuery lalu menggunakan metode .css (). Namun jadilah lelah karena beberapa orang masih di zaman batu menggunakan browser yang dinonaktifkan JavaScript.

ecollis6
sumber
0

Mengapa tidak menerapkan batas ke bagian bawah UL?

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}
daging babi
sumber
1
Jika Anda memiliki padding-bottompada <ul>elemen atau margin-bottompada yang terakhir <li>unsur, ini tidak akan memiliki penempatan yang diinginkan dari bawah kanan yang terakhir <li>elemen. Jika tidak, ini adalah solusi yang bagus.
Wex
0

Jika Anda mengapung elemen, Anda dapat membalik urutannya

yaitu float: right; bukanfloat: left;

Dan kemudian gunakan metode ini untuk memilih anak pertama dari sebuah kelas.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

Ini sebenarnya menerapkan kelas ke contoh TERAKHIR hanya karena sekarang dalam urutan terbalik.

Berikut adalah contoh yang berfungsi untuk Anda:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
Ozzy
sumber
-2

Sulit untuk mengatakannya tanpa melihat sisa CSS Anda, tetapi coba tambahkan !importantdi depan warna perbatasan, untuk membuatnya seperti ini:

#refundReasonMenu #nav li:last-child
{
  border-bottom: 1px solid #b5b5b5 !important;
}
changelog
sumber