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:

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:

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:

Dengan CSS pseudo class selector memudahkan kita untuk membuat style pada element tertentu yang menempati posisi tertentu pada dokumen HTML, sebelumnya hal tersebut hanya dapat dilakukan dengan mendefinisikan class.

:first-child adalah pseudo class selector yang akan menseleksi element jika element tersebut merupakan child pertama dari parent nya, demikian juga dengan :last-child yang akan menseleksi element child dengan posisi terakhir dari parent nya

Oleh tim JWD: dari berbagai sumber

Dukungan browser
:first-child()

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 3.0 (1.9) 7[1] 9.5 4

Sumber:  Mozilla Developer Network

:last-child()

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.5 3.2

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

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

  1. Tutorial Grocery CRUD Lengkap
  2. Implementasi HMVC Pada Codeigniter 4
  3. Trik Coding Cepat dan Efisien Pada PHP
  4. PHP Admin Template Dashboard
  5. Prefix Tabel Pada Database, Perlukah?
  6. Same Origin Policy – Apa dan Bagaimana Mengatasinya?
  7. JSONP Dengan Javascript dan jQuery – Lintas Domain
  8. JSON Pada Javascript – Panduan Lengkap
  9. JSON Pada Dokumen HTML
  10. JSON Dari Database – PHP dan MySQL