Apakah ada pemilih CSS untuk anak langsung pertama saja?

315

Saya memiliki html berikut

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

Dan gaya berikut:

DIV.section DIV:first-child 
{
  ...
}

Untuk beberapa alasan saya tidak mengerti gaya ini diterapkan pada "sub konten 1" <div> serta "header" <div> .

Saya berpikir bahwa pemilih pada gaya hanya akan berlaku untuk anak langsung pertama dari div dengan kelas yang disebut "bagian". Bagaimana saya bisa mengganti pemilih untuk mendapatkan yang saya inginkan?

html css css-selectors Jeremy
sumber
3
jsfiddle.net/joelpurra/7t5CK
Joel Purra

Jawaban:

519

Apa yang Anda posting secara harfiah berarti "Temukan div yang ada di dalam div bagian dan merupakan anak pertama dari orang tua mereka." Sub berisi satu tag yang cocok dengan deskripsi itu.

Tidak jelas bagi saya apakah Anda ingin kedua anak dari div utama atau tidak. Jika demikian, gunakan ini:

div.section > div

Jika Anda hanya ingin tajuk, gunakan ini:

div.section > div:first-child

Menggunakan >perubahan deskripsi untuk: "Temukan div yang merupakan keturunan langsung dari div bagian" yang adalah apa yang Anda inginkan.

Harap dicatat bahwa semua browser utama mendukung metode ini, kecuali IE6. Jika dukungan IE6 kritis-misi, Anda harus menambahkan kelas ke div anak dan menggunakannya. Kalau tidak, itu tidak layak untuk diperhatikan.

Matchu
sumber
8
: anak pertama tidak diperlukan, dalam hal ini.
eozzy
3
tampaknya OP tidak bertanya tentang pemilih sebanyak mengapa aturan itu diterapkan pada semua div anak.
Doug Neiner
Interpretasi saya adalah bahwa ia mendapatkan konsep pewarisan CSS, dan berpikir bahwa anak pertama akan memiliki efek yang> miliki. Ini kata-kata yang agak tidak jelas.
Matchu
3
Ah, kegembiraan menjadi cukup tua untuk mengingat kapan pemilih 'keturunan langsung' akan menyelesaikan semua masalah Anda tetapi Anda tidak bisa menggunakannya karena itu tidak bekerja di IE . Banyak frustrasi yang tidak perlu akan terjadi kemudian.
Agustus
Ini berlaku untuk anak pertama dari anak pertama juga. Jika benar-benar perlu menerapkan perubahan hanya pada anak pertama, kami harus membatalkan perubahan pada anak-anak dari anak tersebut. Sesuatu seperti ini:div.section > div:first-child > div { /* Cancel Changes*/}
Mahdi J.Ansari
51

Menemukan pertanyaan ini mencari di Google. Ini akan mengembalikan anak pertama elemen dengan kelas container, terlepas dari apa jenis anak itu.

.container > *:first-child
{
}
Tom Gullen
sumber
44

CSS disebut Cascading Style Sheets karena aturannya diturunkan. Menggunakan pemilih berikut, akan memilih hanya anak langsung dari orang tua, tetapi aturannya akan diwarisi oleh divanak-anak itu divs:

div.section > div { color: red }

Sekarang, baik itu div dan anak-anaknya akan menjadi red. Anda harus membatalkan apa pun yang Anda tetapkan pada orang tua jika Anda tidak ingin mewarisi:

div.section > div { color: red }
div.section > div div { color: black }

Sekarang hanya satu divyang merupakan anak langsung dari yang div.sectionakan merah, tetapi anak-anaknya divsakan tetap hitam.

Doug Neiner
sumber
6 
div.section > div
eozzy
sumber
6

Gunakan div.section > div.

Lebih baik lagi, gunakan <h1>tag untuk tajuk dan div.section h1di CSS Anda, sehingga untuk mendukung browser yang lebih lama (yang tidak tahu tentang >) dan menjaga semantik markup Anda.

WegDwight
sumber
Ide bagus, sayangnya saya juga perlu mendukung IE6, dan jika saya menggunakan h1, saya perlu mengatur ukuran font untuk mewarisi sehingga font cocok dengan body, dan ie7 dan di bawah tidak mendukung inherit. arg!
Jeremy
Juga, saya punya div anak dan meletakkan div anak di h1 melanggar aturan, meskipun IE merendernya, saya tidak yakin apa yang browser lain lakukan
Jeremy
3

Selektor CSS untuk anak pertama langsung dalam kasus Anda adalah:

.section > :first-child

Pemilih langsung adalah> dan pemilih anak pertama adalah: anak pertama

Tidak perlu tanda bintang sebelum: seperti yang disarankan orang lain. Anda dapat mempercepat pencarian DOM dengan memodifikasi solusi ini dengan menambahkan tag:

div.section > :first-child
Matt Parkins
sumber