::first-child, ::last-child

Selector ::first-child

Pseudo-class ::first-child digunakan untuk memilih elemen pertama dalam suatu kelompok elemen yang memiliki elemen orang tua yang sama. Contohnya:

ul li:first-child {
  color: blue;
}

Dalam contoh di atas, setiap elemen <li> yang menjadi elemen pertama di dalam elemen <ul> akan diberi warna biru.

Selector ::last-child

Pseudo-class ::last-child digunakan untuk memilih elemen terakhir dalam suatu kelompok elemen yang memiliki elemen orang tua yang sama. Contohnya:

ul li:last-child {
  color: green;
}

Dalam contoh di atas, setiap elemen <li> yang menjadi elemen terakhir di dalam elemen <ul> akan diberi warna hijau.

Jadi, Anda dapat menggunakan kedua pseudo-class ini untuk mengubah gaya tampilan elemen pertama dan terakhir dalam suatu kelompok elemen yang memiliki elemen orang tua yang sama dalam HTML Anda.