ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 11-08-2016

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

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  2. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  3. Memahami Fungsi Date Pada PHP
  4. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  5. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  6. Setting ODBC MySQL Untuk Gammu
  7. Cara Install dan Menggunakan Gammu di Windows
  8. Format Tanggal Indonesia Dengan PHP
  9. Cara Install MySQL Portable Zip File di Windows – Panduan Lengkap
  10. Memahami Statemen Return Pada PHP