Pemilih CSS apa yang dapat digunakan untuk memilih div pertama dalam div lain

97

Saya punya sesuatu seperti:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Apa pemilih css untuk div kedua (div pertama dalam div "konten") sehingga saya bisa menyetel warna font tanggal dalam div itu?

css css-selectors GregH
sumber
1
Silakan terima jawaban pilihan teratas, itu pasti benar.
Barry Michael Doyle

Jawaban:

228

Jawaban PALING BENAR untuk pertanyaan Anda adalah ...

#content > div:first-of-type { /* css */ }

Ini akan menerapkan CSS ke div pertama yang merupakan turunan langsung dari #content (yang mungkin atau mungkin bukan elemen turunan pertama dari #content)

Pilihan lain:

#content > div:nth-of-type(1) { /* css */ }
Jeremy Moritz
sumber
6
Setuju bahwa itu SATU-SATUNYA jawaban yang benar untuk pertanyaan itu dan itu harus diterima.
Ilya Streltsyn
Bisakah Anda memberi tahu saya cara memilih semua div exceptpertama / terakhir?
Tân
5
@HappyCoding #content > div:not(:last-of-type) { /* css */ }
Jeremy Moritz
@ Tân jika Anda ingin semua div kecuali yang pertama DAN terakhir, itu akan menjadi ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Jeremy Moritz
20

Kamu ingin

#content div:first-child {
/*css*/
}
Kapten Otis
sumber
3
Tidak akan berhasil karena <div>bukan anak pertama (itu <h1>).
Josh Leitzel
Belum lagi itu tidak akan berfungsi sama sekali di IE bahkan jika tanggal tersebut divakan menjadi anak pertama.
Valentin Flachsel
1
Betulkah? W3 mengatakan itu akan selama doctype ditentukan. (Sejujurnya saya tidak tahu.)
Josh Leitzel
3
Baru saja menjalankan tes, memang berfungsi jika doctype ditentukan. Dalam pembelaan saya, saya tidak akan terkejut jika hal-hal mulai berfungsi di IE jika Anda mengetik <the_cake_is_a_lie> di bagian atas file ...
Valentin Flachsel
1
Saya selalu menguji sebelum memposting jawaban. Dan kue itu bohong.
Kapten Otis
16

Jika kita dapat berasumsi bahwa H1 akan selalu ada, maka

div h1+div {...}

tapi jangan takut untuk menentukan id dari div konten:

#content h1+div {...}

Itu sebagus yang Anda bisa dapatkan lintas-browser sekarang tanpa menggunakan pustaka JavaScript seperti jQuery. Menggunakan div h1 + memastikan bahwa hanya div pertama setelah H1 yang mendapatkan gaya. Ada alternatif lain, tetapi mereka bergantung pada pemilih CSS3, dan karenanya tidak akan berfungsi pada sebagian besar pemasangan IE.

Stan Rogers
sumber
+1. Bahkan tidak memikirkan tentang itu. Ingatlah bahwa solusi ini tidak akan berfungsi di IE6.
Josh Leitzel
6

Hal yang paling dekat dengan apa yang Anda cari adalah : pseudoclass anak pertama ; sayangnya ini tidak akan berhasil dalam kasus Anda karena Anda memiliki <h1>sebelum <div>s. Apa yang saya sarankan adalah Anda menambahkan kelas ke <div>, suka <div class="first">dan kemudian menatanya seperti itu, atau menggunakan jQuery jika Anda benar-benar tidak dapat menambahkan kelas:

$('#content > div:first')

Josh Leitzel
sumber
1
salah mengeja - seharusnya$('#content > div.first)
Mateusz Odelga