CSS :empty Sözde Sınıfı

Değeri boş olan etiketlere stil işlemi uygulamak için bu sözde sınıf kullanılır. Değerin boş olup olmadığı kontrol edilirken eğer boşluk karakteri ya da yeni satır karakteri vs. bulunursa bu boş olarak kabul görmeyecektir.

Örneğin li etiketinde boş olanları seçip stil uygulayalım.

<ul>
    <li>li etiketi</li>
    <li></li>
    <li> </li>
    <li></li>
    <li>li etiketi</li>
</ul>
<style>
ul li:empty {
    background-color: lime;
}
</style>

3. li etiketi seçilmeyecektir çünkü boşluk karakteri olduğu için bunu boş kabul etmemektedir :)

• li etiketi
• li etiketi

Tabi aslında bu sözde sınıf genelde boş olanı gizlemek için kullanılır. Yani stil işlemi şöyle değiştirilebilir;

ul li:empty {
    display: none;
}

Böylece boş olanlar gizlenmiş olur. Şöyle bir örnek ile çok daha kolay anlayacağınızı umuyorum. Düşününki bildirimlerin sayısını gösterdiğiniz bir alan var, ve eğer bildirim yoksa bunu gizlemek istiyorsunuz. O zaman örneğimiz şöyle olmalı;

<span class="notification-number">9+</span>
<span class="notification-number"></span>
<style>
.notification-number:empty {
    display: none;
}
</style>

Normalde boş olanı gizlemesem şöyle duracaktı;

Boş olduğu zaman gizlediğimde, diğer stil işlemleri de gözükmeyecektir ve rahatsız edici bir görüntüyü ortadan kaldırmış oluruz.