Pilih elemen terakhir kedua dengan css

135

Saya sudah tahu: anak terakhir. Tetapi apakah ada cara untuk memilih div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

CATATAN: tanpa jQuery, hanya dengan CSS

html css css-selectors

— dinamis
sumber

Tentunya ada beberapa logika mengapa anak kedua-terakhir signifikan?

— David Tang

ya saya harus memilih yang terakhir dan yang kedua terakhir untuk menerapkan beberapa gaya

— dinamis

mengapa Anda tidak bisa hanya menempatkan kelas pada div terakhir ke-2

— Daveo

"Mengapa Anda tidak bisa hanya menempatkan kelas pada div terakhir ke-2": Mungkin jika Anda mendapatkan konten gaya yang sedang dibuat, di mana Anda tidak memiliki (mudah) akses untuk menambahkan kelas ke item terakhir kedua?

— Henrik

Jawaban:

271

Di CSS3 Anda memiliki:

:nth-last-child(2)

Lihat: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

Dukungan Browser nth-last-child :

Chrome 2

Firefox 3.5

Opera 9.5, 10

Safari 3.1, 4

Internet Explorer 9

— Frosty Z
sumber

Ini mungkin cara yang harus dilakukan kecuali Anda dapat melampirkan kelas ke div yang Anda coba pilih. Seperti yang disebutkan Frosty, CSS3 tidak didukung oleh browser yang lebih lama atau IE. Jquery adalah pilihan yang jauh lebih baik jika Anda khawatir tentang komputabilitas lintas-browser.

— Thomas

Itu adalah salinan / tempel dari artikel yang ditautkan ... Jawaban yang diedit, terima kasih.

— Frosty Z

solusi di css: #container>: nth-last-child (2) {background: red;} Silakan periksa codepen ini untuk melihatnya secara langsung: codepen.io/marc_dahan/pen/JyxObz

— marcdahan

Sekarang karena kita tidak perlu mendukung IE yang lebih lama, jawaban ini akan bekerja dengan sempurna. Jujur, jika orang masih menggunakan IE 8 dan di bawah, mereka tidak pantas memiliki hal-hal cantik.

— Stender

Catatan: Diposting jawaban ini karena OP kemudian menyatakan dalam komentar bahwa ia perlu memilih dua elemen terakhir , bukan hanya yang kedua dari belakang.

The :nth-childpemilih CSS3 sebenarnya lebih mampu dari yang Anda bayangkan!

Misalnya, ini akan memilih 2 elemen terakhir dari #container:

#container :nth-last-child(-n+2) {}

Tapi ini hanyalah awal dari persahabatan yang indah.

:nth-child Dukungan Browser

Tampilkan cuplikan kode

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

Luaskan cuplikan

— kapa
sumber

Bagus, jawaban saya hanya memilih anak terakhir minus 1. Tidak tahu tentang ini. + 'd

— rsplak