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:
- Buatlah satu buah file dengan nama index.html, tuliskan kode seperti berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!doctype html> <html> <title>Pseudo Class Last And </title> <head> <style> body{ width: 400px; margin: 10px auto; } nav { background-color: #111; } .sample-menu { margin: 0; padding: 0; list-style-type: none; background-color: #111; } .sample-menu li { float: left; border-right:1px solid #7D7D7D; } .sample-menu li:last-child { border-right: 3px solid red; } .sample-menu li:first-child { border-left:3px solid blue; } .sample-menu li a { background-color: #111; display: block; color: #FFFFFF; text-align: center; padding: 14px 20px; text-decoration: none; } .sample-menu li a:hover { background-color: #403E3E; } </style> </head> <body> <nav> <ul class="sample-menu"> <li><a href="#">Home</a></li> <li><a href="#">Brian</a></li> <li><a href="#">Abraham</a></li> </ul> <div class="clear"></div> </nav> </body> </html> |
Save dan lihat hasilnya, berikut output yang akan di tampilkan seperti contoh gambar di bawah ini:
Demikian penjelasan mengenai fungsi pseudo class selector :first-child dan :last-child di css. Semoga Bermanfaat.