Memahami :first-child dan :last child, Selector Untuk Posisi Element

Meneruskan tutorial sebelumnya mengenai pseudo class selector, kali ini kita akan membahas mengenai  pseudo class selector untuk posisi element yaitu :first-child dan  :last-child, penggunaan pseudo class ini memudahkan pekerjaan kita karena tidak perlu menuliskan  class pada element, terlebih ketika element digenerate oleh bahasa pemrograman server side seperti php.

Pseudo class selector :first-child dan :last-child

Pseudo class :first-child yang mulai diperkenalkan pada CSS 2, digunakan untuk menseleksi element children yang berada pada urutan pertama sedangkan :last-child yang 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, perhatikan contoh berikut:

HTML:

<ul class="sample-child">
	<li>List 1
		<ol>
			<li>List 2</li>
			<li>List 3</li>
		</ol>
	</li>
	<li>List 4
		<ul>
			<li>List 5</li>
			<li>List 6</li>
		</ul>
	</li>
	<li>List 7</li>
</ul>

CSS Rule nya:

.sample-child li:first-child {
	color: blue;
}
.sample-child li:last-child {
	color: red;
}

Hasil yang diperoleh:

• List 1
  1. List 2
  2. List 3
• List 4
  • List 5
  • List 6
• List 7

Contoh Penggunaan Pseudo Class Selector :first-child dan :last-child

Pseudo class ini sering digunakan ketika menampilkan element secara berurutan baik vertikal maupun horizontal, misal: ketika ingin menampilkan daftar artikel dengan garis pembatas disebelah bawah kecuali untuk  element terakhir, seperti contoh berikut:

• Memahami CSS Pseudo Class Selector :first-child dan :last-child
• CSS Pseudo Class Selector untuk membuat link :link, :hover, :active, dll
• CSS Pseudo Class Selector Terkait Input (Input, Textarea, Checkbox, dan Radio)
• Membuat Icon Social Media Dengan Efek Menarik

Kode HTML nya:

<ul class="list-content">
	<li><a href="#">Memahami CSS Pseudo Class Selector :first-child dan :last-child</a></li>
	<li><a href="#">CSS Pseudo Class Selector untuk membuat link :link, :hover, :active, dll</a></li>
	<li><a href="#">CSS Pseudo Class Selector Terkait Input (Input, Textarea, Checkbox, dan Radio</a></li>
	<li><a href="#">Membuat Icon Social Media Dengan Efek Menarik</a></li>
</ul>

Sedangakn CSS Rule nya:

.list-content {
    margin: 0;
    padding: 0 15px;
    border: 1px solid #D0D0D0;
	border-top: 5px solid #CCCCCC;
	width: 220px;
	list-style-type: none;
}
.list-content li a {
    display: block;
    color: #000000;
    padding: 10px;
    text-decoration: none;
	transition: all .3s;
}
.list-content li a:hover {
    color: #FF7007;
}
.list-content li {
    border-bottom: 1px solid #D4D4D4;
	margin: 0;
}
.list-content li:last-child {
    border-bottom: none;
}

Pada contoh diatas kita hilangkan border pada artikel paling bawah dengan selector  .list-content li:last-child. Contoh lain adalah ketika kita membuat menu horizontal.

Kode HTML nya:

<nav>
	<ul class="sample-menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Article</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<div class="clear"></div>
</nav>

CSS Rulenya:

nav {
	background-color: #4A4A4A;
}
.sample-menu {
	float:right;
    margin: 0;
    padding: 0;
	list-style-type: none;
}
.sample-menu li {
    float: left;
    border-right:1px solid #7D7D7D;
}
.sample-menu li:last-child {
    border-right: none;
}
.sample-menu li:first-child {
    border-left:1px solid #7D7D7D;
}
.sample-menu li a {
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}
.sample-menu li a:hover {
    background-color: #403E3E;
}

Contoh berikutnya adalah ketika kita ingin menampilkan thumbnail gambar untuk gallery baik responsive maupun fixed width, contoh berikut untuk fixed width:

HTML:

<ul class="sample-gallery">
		<li>Image 1</li>
		<li>Image 2</li>
		<li>Image 3</li>
	</ul>

CSS:

.sample-gallery {
	border: 1px solid #CCCCCC;
    margin: 0;
	display: table;
	width: auto;
	text-align: center;
	padding: 10px;
	list-style-type: none;
}
.sample-gallery li {
	float: left;
	margin-right: 7px;
	width: 85px;
	height: 85px;
	background-color: #CCCCCC;
	line-height: 80px;
}

Hasil:

• Image 1
• Image 2
• Image 3

Pada contoh diatas, jarak image ke 3 dengan border kanan terlalu jauh, karena disamping margin kanan  untuk element Image (7px), juga ditambah padding dari element ul (10px), untuk itu, kita perlu menggunakan pseudo class :last-child untuk menghilangkan margin  element Image 3.

.sample-gallery li:last-child {
	padding-right: 0;
}

Hasilnya:

• Image 1
• Image 2
• Image 3

Contoh lain penggunaan pseudo class ini adalah untuk  artikel, misal suatu artikel terdiri dari beberapa paragraf dan khusus untuk paragraf pertama dan terakhir akan kita beri style khusus.

Contoh:

Dukungan browser
:first-child()

Sumber:  Mozilla Developer Network

:last-child()

Sumber:  Mozilla Developer Network

Kesimpulan

Pseudo class selector :first-child dan  :last-child merupakan salah satu daftar selector yang penting bagi web developer, karena disamping memudahkan pekerjaan, juga dalam banyak  kondisi kita akan memerlukan selector ini.

Demikian tutorial mengenai pseudo class selector :first-child dan :last-child, semoga bermanfaat…

Salam JWD