The :first-childpemilih memungkinkan Anda untuk menargetkan elemen pertama segera di dalam elemen lain. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "struktural pseudo-class", yang berarti digunakan untuk mengatur gaya konten berdasarkan hubungannya dengan konten induk dan saudara.
Misalkan kita memiliki artikel dan ingin memperbesar paragraf pertama - seperti "lede", atau bagian dari teks pengantar:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Alih-alih memberinya kelas (misalnya .first), kita dapat menggunakan :first-childuntuk memilihnya:
p:first-child ( font-size: 1.5em; )Penggunaannya :first-childsangat mirip :first-of-typetetapi dengan satu perbedaan penting: ini kurang spesifik. :first-childhanya akan mencoba mencocokkan turunan pertama langsung dari elemen induk, sementara first-of-typeakan mencocokkan kemunculan pertama dari elemen yang ditentukan, bahkan jika itu tidak benar-benar muncul pertama kali dalam HTML. Pada contoh di atas, hasilnya akan sama, hanya karena anak pertama dari articlejuga merupakan pelemen pertama . Ini mengungkapkan kekuatan :first-child: ia dapat mengidentifikasi elemen dengan relasi ke semua saudaranya, bukan hanya saudara kandung dari tipe yang sama.
Contoh yang lebih lengkap di bawah ini menunjukkan penggunaan :first-childdan pemilih kelas-semu terkait :last-child,.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | 3.2+ | Apa saja | 9,5+ | 9+ | Apa saja | Apa saja |
:first-childdiperkenalkan di CSS Selectors Module 3, yang berarti browser versi lama tidak mendukungnya. Namun, dukungan browser modern sangat sempurna, dan pseudo-selector baru digunakan secara luas di lingkungan produksi. Jika Anda memerlukan dukungan browser yang lebih lama, baik polyfill untuk IE, atau gunakan penyeleksi ini dengan cara yang tidak kritis seperti peningkatan progresif, yang direkomendasikan.