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

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);
}

• 

  Name 1

• 

  Name 2

• 

  Name 3

• 

  Name 4

• 

  Name 5

• Name 6

• 

  Name 7

• Name 8

• 

  Name 9

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:

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

 

Browser Support

Sumber: Mozilla Developer Network

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