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

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.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail