Cara Menggunakan Pseudo-class :empty pada CSS

Pseudo-class :empty adalah pemilih kelas pseudo yang digunakan untuk memilih elemen di halaman yang kosong.

Unsur dianggap kosong jika tidak memiliki elemen anak (simpul) atau konten teks. Komentar dan instruksi pemrosesan tidak mempengaruhi apakah elemen itu kosong atau tidak. Karenanya:

<div><!-- COMMENT HERE  --></div>

dianggap kosong, dan dengan demikian dipilih oleh :empty; sementara

<div>
    Text and a child node.
    <p>Some content here.</p>
</div>
<div>
    Text here.
</div>

tidak kosong dan karenanya tidak cocok dengan pemilih (selector).

Memilih elemen kosong berguna untuk menyembunyikan elemen-elemen ini karena mereka mungkin menjadi penyebab dari ruang vertikal dan / atau horizontal aneh yang aneh jika mereka memiliki padding. Ini juga berguna untuk membuang elemen kosong di lingkungan yang dinamis di mana elemen kosong tidak lagi diperlukan atau berguna.

Catatan:

Konten yang dihasilkan seperti konten yang dihasilkan oleh pseudo-elements :: before dan :: after tidak dihitung sebagai konten “nyata”, dan karena itu tidak akan memengaruhi kekosongan elemen, bahkan jika mereka keluar di dalam elemen.

Misalnya, elemen kosong <div> <div> dengan beberapa teks yang dihasilkan menggunakan :: setelah pseudo-element akan mendapatkan warna latar belakang linen dalam contoh berikut:

div {
    padding: 15px; /*  */
}

div::after {
    content:
}

div:empty {
    background-color: linen;
}

Contoh:

/* selects and hides all elements on a page */
*:empty {
    display: none;
}

/* selects and hides all empty paragraphs */
p:empty {
    display: none;
}

/* selects and hides all menu items that are empty */
nav a:empty {
    display: none;
}

/* selects empty table cells in a table and applies a background color to them */
td:empty {
    background-color: #eee;
}