Pada kesempatan kali ini saya akan apa fungsi pseudo class selector :first-child dan :last-child di css. Sebelum saya membahas lebih jauh, saya akan menjelaskan perbedaan antara :first-child dan :last-child ?

:first-child

Pseudo class tersebut mulai diperkenalkan pada CSS 2, digunakan untuk menseleksi element children yang berada pada urutan pertama.

Browser Support

Chrome Firefox IE Opera Safari
4.0 3.0 7 9.5 4

 

:last-child

Pseudo class tersebut baru diperkenalkan pada CSS 3, digunakan untuk menseleksi element children yang berada pada urutan terakhir. Element children ini berlaku untuk tiap-tiap parent yang ada di dalam suatu group element.

Browser Support

Chrome Firefox IE Opera Safari
1.0 1.0 (1.7) 9.0 9.5 3.2

 

Berikut contoh nya:

  1. Buatlah satu buah file dengan nama index.html, tuliskan kode seperti berikut:

Save dan lihat hasilnya, berikut output yang akan di tampilkan seperti contoh gambar di bawah ini:

pseudo class css

Demikian penjelasan mengenai fungsi pseudo class selector :first-child dan :last-child di css. Semoga Bermanfaat.