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.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

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

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

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

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

  6. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  7. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  8. Memahami Fungsi Date Pada PHP

  9. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu

  10. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP