Bagaimana saya bisa mendapatkan anak nomor tertentu menggunakan CSS?

270

Saya punya tableyang tddibuat secara dinamis. Saya tahu cara mendapatkan anak pertama dan terakhir tetapi pertanyaan saya adalah:

Apakah ada cara untuk mendapatkan anak kedua atau ketiga menggunakan CSS?

html css css-selectors Satch3000
sumber

Jawaban:

398

Untuk browser modern, gunakan td:nth-child(2)untuk yang kedua td, dan td:nth-child(3)yang ketiga. Ingat bahwa ini mengambil baris kedua dan ketiga td untuk setiap baris .

Jika Anda memerlukan kompatibilitas dengan IE yang lebih lama dari versi 9, gunakan kombinator saudara atau JavaScript seperti yang disarankan oleh Tim . Lihat juga jawaban saya untuk pertanyaan terkait ini untuk penjelasan dan ilustrasi metodenya.

BoltClock
sumber
19
Jangan lupa bahwa ini hanya berfungsi dengan penyeleksi CSS 3 (dengan kata lain, tidak dalam versi IE sebelum 9).
zneak
1
Segera menjadi perhatian masa lalu ... Perasaan saya tentang ini .
Clarus Dignus
2
Sebagai solusi umum, td:nth-of-type(3)lebih baik. td:nth-child(3)akan cocok elemen yang baik seorang td dan anak ketiga dari induknya, terlepas dari jenis elemen dari dua bersaudara sebelumnya . td:nth-of-type(3)akan mendapatkan yang ketiga td, terlepas dari berapa banyak tdelemen non -sebelumnya . Jika tidak ada tdelemen selain elemen yang Anda inginkan, kedua penyeleksi akan mencocokkan hal yang sama.
CJ Dennis
232

Untuk IE 7 & 8 (dan browser lain tanpa dukungan CSS3 tidak termasuk IE6) Anda dapat menggunakan yang berikut untuk mendapatkan anak ke-2 dan ke-3:

Anak ke-2:

td:first-child + td

Anak ke-3:

td:first-child + td + td

Kemudian cukup tambahkan yang lain + tduntuk setiap anak tambahan yang ingin Anda pilih.

Jika Anda ingin mendukung IE6, itu bisa dilakukan juga! Anda hanya perlu menggunakan sedikit javascript (jQuery dalam contoh ini):

$(function() {
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    });
});

Kemudian di css Anda, Anda cukup menggunakan pemilih kelas untuk melakukan perubahan apa pun yang Anda suka:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }
Tim
sumber
19
Terima kasih atas tip IE7 / 8. Bagus sekali.
Brendon Crawford
2
Anda dapat mengambil pemilih CSS3 dalam jawaban saya atau pemilih CSS2 di Anda dan menjatuhkan mereka langsung ke jQuery dan mereka akan bekerja secara alami di IE6. Tidak perlu melompati semua simpai ekstra ini untuk menambahkan kelas.
BoltClock