: anak pertama tidak bekerja seperti yang diharapkan

97

Saya mencoba untuk memilih yang pertama h1di dalam a divdengan sebuah kelas bernama detail_container. Ini berfungsi jika h1adalah elemen pertama dalam ini div, tetapi jika muncul setelah ini, ulitu tidak akan berfungsi.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Saya mendapat kesan bahwa CSS yang saya miliki akan memilih yang pertama h1tidak peduli di mana itu div. Bagaimana cara membuatnya bekerja?

css css-selectors Pria Muffin
sumber
1
Apa pun yang tidak bisa dilakukan CSS, JavaScript bisa.
JCOC611
11
Ini adalah sesuatu yang dapat Anda lakukan dengan CSS3 :)
BoltClock

Jawaban:

219

The h1:first-childpemilih berarti

Pilih anak pertama dari induknya
jika dan hanya jika itu sebuah h1elemen.

The :first-childwadah sini adalah ul, dan tidak bisa seperti memuaskan h1:first-child.

Ada CSS3 :first-of-typeuntuk kasus Anda:

.detail_container h1:first-of-type
{
    color: blue;
}

Tetapi dengan masalah kompatibilitas browser dan yang lainnya, Anda lebih baik memberikan kelas pertama h1, lalu menargetkan kelas itu:

.detail_container h1.first
{
    color: blue;
}
BoltClock
sumber
2
Saya mengerti sekarang, meskipun saya pikir mereka seharusnya menerapkan kedua versi saat mereka membuat standar.
The Muffin Man
Tidak berfungsi pada rilis IE9. Tercantum h1: tidak dikenal di alat pengembang
Cine
11
Daftar kompatibilitas dari :first-of-typepemilih.
Jess Telford
4
Daftar kompatibilitas yang lebih baru dari :first-of-type. Tautan lama salah.
BadHorsie
Dalam pandangan saya, istilah :first-childtersebut tidak jelas untuk dipahami, karena Anda mendefinisikan item sebagai pemilih CSS, katakanlah h1, dan kemudian Anda kemudian berpikir "ambil anak pertama" dari semua di tingkat DOM yang dipilih. Saya sering salah menggunakannya ... Kita harus terbiasa dengan :first-of-typeselektor dan memikirkan anak pertama dari jenisnya.
Kai Noack
14

:first-childmemilih yang pertama h1 jika dan hanya jika itu adalah anak pertama dari elemen induknya. Dalam contoh Anda, the uladalah anak pertama dari div.

Nama kelas semu agak menyesatkan, tetapi dijelaskan dengan cukup jelas di sini di spesifikasi.

:firstPemilih jQuery memberi Anda apa yang Anda cari. Kamu bisa melakukan ini:

$('.detail_container h1:first').css("color", "blue");

Rob Sobers
sumber
Hak Anda menyesatkan, saya terutama bingung karena saya telah menggunakan jQuery untuk melakukan ini sebelumnya.
The Muffin Man
9

Untuk kasus khusus itu, Anda dapat menggunakan:

.detail_container > ul + h1{ 
    color: blue; 
}

Tetapi jika Anda membutuhkan pemilih yang sama pada banyak kasus, Anda harus memiliki kelas untuk itu, seperti yang dikatakan BoltClock.

Grekz
sumber
Anda seharusnya tidak memiliki masalah apa pun. Di sini ref w3.org/TR/CSS2/selector.html#child-selectors
Grekz
6

Anda juga bisa menggunakan

.detail_container h1:nth-of-type(1)

Dengan mengubah nomor 1 dengan nomor lain, Anda dapat memilih item h1 lainnya.

Fabrice
sumber
1

Anda dapat membungkus h1tag Anda dengan yang lain divdan kemudian yang pertama adalah first-child. Itu divbahkan tidak membutuhkan gaya. Itu hanya cara untuk memisahkan anak-anak itu.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
sumber
0

Elemen tidak dapat secara langsung mewarisi dari <body>tag. Anda dapat mencoba memasukkannya ke dalam <dir style="padding-left:0px;"></dir>tag.

Edmond Chow
sumber