ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! 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

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