Fungsi Pseudo Class Selector first-child Dan last-child

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

: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

Berikut contoh nya:

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

<!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.