The :first-childpemilih membolehkan anda untuk mensasarkan elemen pertama segera dalam unsur lain. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "kelas pseudo struktural", yang bermaksud digunakan untuk menggayakan konten berdasarkan hubungannya dengan kandungan ibu bapa dan saudara kandung.
Misalkan kita mempunyai artikel dan ingin membuat perenggan pertama lebih besar - seperti "lede", atau potongan teks pengantar:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Daripada memberikannya kelas (misalnya .first), kita dapat menggunakannya :first-childuntuk memilihnya:
p:first-child ( font-size: 1.5em; )Penggunaan :first-childsangat serupa dengan :first-of-typetetapi dengan satu perbezaan kritikal: kurang spesifik. :first-childhanya akan mencocokkan anak pertama terdekat dari elemen induk, sementara first-of-typeakan sesuai dengan kejadian pertama elemen yang ditentukan, walaupun ia tidak mendahului yang pertama dalam HTML. Dalam contoh di atas, hasilnya akan sama, hanya kerana anak pertama articlejuga merupakan punsur pertama . Ini menunjukkan :first-childkehebatan: ia dapat mengenal pasti unsur yang berkaitan dengan semua adik-beradiknya, bukan hanya saudara kandung dari jenis yang sama.
Contoh yang lebih lengkap di bawah menunjukkan penggunaan :first-childdan pemilih kelas pseudo yang berkaitan , :last-child.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sebarang | 3.2+ | Sebarang | 9.5+ | 9+ | Sebarang | Sebarang |
:first-childdiperkenalkan dalam CSS Selectors Module 3, yang bermaksud versi lama penyemak imbas tidak menyokongnya. Walau bagaimanapun, sokongan penyemak imbas moden sempurna, dan pemilih semu baru digunakan secara meluas dalam persekitaran pengeluaran. Sekiranya anda memerlukan sokongan penyemak imbas yang lebih lama, baik polyfill untuk IE, atau gunakan pemilih ini dengan cara yang tidak kritikal á la peningkatan progresif, yang disyorkan.