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

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