ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

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

Recomended Post

Silakan tinggalkan komentar

*

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Like Us

  1. Memahami Tipe Data Pada PHP

  2. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  3. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  4. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  5. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  6. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  7. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  8. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  9. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  10. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP