: 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:
|
1 2 3 4 5 6 7 8 |
<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.
|
1 2 3 |
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.
|
1 2 3 4 5 6 |
<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.