NEW!! » Premium Support - PHP, MySQL, Dll Buku Query MySQL Lihat Detail » x

Memahami Pseudo Class :empty Beserta Contoh Penggunaannya

Sesuai namanya, pseudo class :empty digunakan untuk menseleksi element yang kosong, kosong disini berarti element tersebut tidak ada isinya sama sekali mulai dari tag pembuka (misal: <div>) hingga tag penutup (misal: </div>), isi tersebut termasuk: element children, teks, spasi, tab, enter, dll, namun tidak termasuk comment, contoh sebagai berikut:

<!-- Empty -->
<div></div>

<!-- Empty -->
<div><!--
	comment
--></div>

<!-- NOT Empty (space) -->
<div> </div>

<!-- NOT Empty (tab) -->
<div>	</div>

<!-- NOT Empty (enter) -->
<div>	
</div>

Contoh penggunaan pseudo class :empty

Contoh 1: Style untuk kolom tabel yang kosong

Contoh penggunaan pseudo class :empty salah satunya ketika kita menampilkan data dalam bentuk tabel. Dengan membedakan warna pada kolom yang kosong, akan membuatnya “eye catching” sehingga mudah terlihat, apalagi jika data tersebut jumlahnya banyak, contoh seperti pada data absensi, nilai, atau penjualan

Nama US I US II UAS
Nama 1 8 7 9
Nama 2 8 8 8
Nama 3 7 9 8
Nama 4 9 9
Nama 5 7 7 8

Contoh 2: Gambar default untuk list yang kosong

Terkadang, pada kondisi tertentu kita perlu untuk menampilkan list berupa thumbnail (gambar), contoh ketika menampilkan daftar siswa, foto gallery, keranjang belanja, dll, namun, terkadang tidak semua item yang kita tampilkan tersebut ada gambarnya, pada kondisi ini, dengan pseudo class :empty, kita dapat mengganti gambar yang ksong tersebut dengan gambar lain, contoh:

HTML:

<ul class="sample-gallery">
	<li><img src="..."/><a href="#">Name 1</a></li>
	<li><img src="..."/><a href="#">Name 2</a></li>
	<li><img src="..."/><a href="#">Name 3</a></li>
	<li><img src="..."/><a href="#">Name 4</a></li>
	<li><div><img src="..."/></div><a href="#">Name 5</a></li>
	<li><div></div><a href="#">Name 6</a></li>
	<li><img src="..."/><a href="#">Name 7</a></li>
	<li><div></div><a href="#">Name 8</a></li>
	<li><img src="..."/><a href="#">Name 9</a></li>
</ul>

CSS empty:

.sample-gallery li div:empty {
	background: url(question_mark.png);
}

Contoh 3: Notifikasi

Contoh selanjutnya adalah terkait dengan pesan notifikasi, misal pesan yang kemunculannya bersifat dinamis, yang basanya digenerate menggunakan bahasa pemrograman dinamis juga (seperti: PHP), pesan tersebut akan muncul jika ada isinya, jika tidak, maka akan tersembunyi, contoh: biasanya dengan PHP kita membuat notifikasi seperti ini:

if ($message) {
	echo '<div class="message">' . $message . '</div>';
}

Dengan pseudo class :empty, kita kita dapat langsung menuliskannya seperti ini:

<div class="message"><?=$message?></div>
.sample-message {
	max-width: 400px;
    padding: 15px 25px;
    background: #21A931;
    color: #FFFFFF;
}
.sample-message:empty {
	display:none;
}

dengan rule .sample-message:empty, jika $message kosong maka element div.sample-message akan tersembunyi.

Hasil:

Data berhasil disimpan

Jika tidak menggunakan pseudo class :empty, maka alement div.message yang kosong akan tampak seperti ini:

 

Browser Support

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

Sumber: Mozilla Developer Network

Demikian tutorial mengenai pseudo class :empty, semoga dapat bermanfaat.

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.

Recomended Post

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Jasa Konsultasi PHP MySQL Website Dengan Ahlinya

Like Us