Czym Jest i Kiedy Warto Używać :empty w CSS?

⁠Czym jest :empty w CSS?

:empty to pseudoklasa, która pozwala stylować puste elementy.

Zadziała ona tylko wtedy, gdy wewnątrz elementu nie znajduje się żaden tekst, ani żaden inny element.

Przykładowo:

<!-- ✅ -->
<div></div>

<!-- ✅ -->
<div><!-- Comment --></div>

<!-- ❌ -->
<div>Hello world</div>

<!-- ❌ -->
<div><p></p></div>

Jak widzisz :empty zadziała również, gdy wewnątrz elementu znajduje się sam komentarz.

Na podobnej zasadzie działa :blank, który również pozwala stylować puste elementy.

Jedyna różnica pomiędzy :blank, a :empty jest taka, że :blank akceptuje puste spacje wewnątrz elementu:

<!-- :empty ❌ -->
<div> </div>

<!-- :blank ✅ -->
<div> </div>

:blank jest dostępny tylko w przeglądarce Firefox pod nazwą :-moz-only-whitespace. Więcej szczegółów na jego temat znajdziesz tutaj.

Kiedy warto korzystać z :empty?

Empty state

Wyobraź sobie sytuację, gdzie mamy To-Do listę, w postaci <ul>, do którego przekazujemy <li> wraz z treścią zadania.

W momencie, gdy nie dodaliśmy jeszcze żadnego elementu do listy możemy w prosty sposób poinformować użytkownika o braku danych na przykład za pomocą grafiki:

img {
  display: none;
}

ul:empty + img {
  display: block;
}

<ul></ul>
<img src="" alt="Empty state image" />

Lub komunikatu:

p {
  display: none;
}

ul:empty + p {
  display: block;
}

<ul></ul>
<p>Dodaj swoje pierwsze zadanie do To-do listy!</p>

Gdy tylko dodamy do naszej listy element <li> komunikat zniknie ✨

Powyższy przykład możemy wykorzystać również przy <table> i podświetlać puste <td>. Pomysłów na wykorzystanie :empty jest sporo, dlatego warto jest mieć go z tyłu głowy.

Error handling

Kolejnym świetnym przykładem będzie walidacja formularza.

Często tworzymy element o klasie .error, do którego przekazywana jest wiadomość w momencie podania błędnych danych.

:empty przychodzi nam z pomocą i oszczędza zbędnych skryptów Javascript, ponieważ w prosty sposób możemy pokazać element, gdy znajduje się w nim treść:

<div class="error"></div>

.error {
  padding: 10px;
  color: #721c24;
  background-color: #f8d7da;
}

.error:empty {
⁠  display: none;
}

That's all! Świetne rozwiązanie, co nie? 💪🏻

Podsumowanie

:empty jest niestety mało popularny wśród Frontend Developerów. Za jego pomocą możemy oszczędzić sobie wiele czasu (i kodu!).

Mam nadzieję, że z czasem coraz więcel ludzi go pozna i się do niego przekona 🙏🏻