: first-child adalah pseudo-class yang memilih elemen target jika itu adalah anak pertama dari beberapa elemen lain. Artinya,: anak pertama akan cocok dengan elemen hanya jika itu adalah anak pertama dari orang tuanya.
Misalnya, anggap kalian memiliki HTML seperti berikut:
<article>
<p>
Lorem Ipsum...
</p>
<p>
Another Lorem Ipsum...
</p>
</article>
Berikut ini akan memilih dan menerapkan gaya ke paragraf pertama yang, dalam hal ini, adalah anak pertama dari induknya.
p:first-child {
font-size: 1.5em;
}
Aturan di atas tidak akan menata paragraf dalam contoh berikut, karena ini bukan anak pertama dari induk .container nya.
<div class="container">
<h1>Heading</h1>
<p>
Lorem Ipsum...
</p>
</div>
Jika Anda ingin memilih dan menata paragraf pertama di dalam sebuah wadah, apakah itu anak pertama atau tidak, Anda dapat menggunakan: pemilih jenis pertama, yang, seperti namanya, akan memilih elemen pertama dari jenisnya. , apakah itu anak pertama dari orang tuanya atau tidak. Sebagai contoh, p: first-of-type akan memilih paragraf yang muncul setelah tajuk dalam contoh kode sumber di atas, tetapi tidak akan cocok dengan paragraf lain yang datang setelah itu.
The: pseudo-class first-child, seperti pseudo-class lainnya, dapat dirantai dengan penyeleksi lain seperti: hover, misalnya, untuk menyediakan gaya hover untuk elemen yang dipilih. Itu juga bisa dirantai dengan pseudo-elements :: before dan :: after. Lihat contoh dan bagian demo langsung di bawah untuk contoh.