: 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:

 

Berikut ini akan memilih dan menerapkan gaya ke paragraf pertama yang, dalam hal ini, adalah anak pertama dari induknya.

 

Aturan di atas tidak akan menata paragraf dalam contoh berikut, karena ini bukan anak pertama dari induk .container nya.

 

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.

WhatsApp chat