Pseudo-class empty

Pseudo-class empty menentukan tampilan elemen yang kosong (tidak berisi teks).

Sintaksis

cssselector:empty {
  
}

Contoh

Dalam contoh ini, li terakhir kosong, tetapi tetap akan memiliki penanda:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li></li>
</ul>

Результат:

Contoh

Mari ubah perilaku untuk tag li yang kosong:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li></li>
</ul>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

Contoh

Sembunyikan li kosong sepenuhnya:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li></li>
</ul>

cssli:empty {
  display: none;
}

Результат:

Lihat juga