Najczęściej stylujemy elementy, które coś zawierają. A co zrobić z elementem, który nie ma ani dzieci, ani tekstu? Nic trudnego, jest od tego selektor :empty.
<p> </p>
<!-- Pas à cause de l'espace blanc -->
<p></p>
<!-- Vide car pas d'espace blanc -->
p::before {
font-family: 'FontAwesome';
content: 'f240';
}
p:empty::before {
content: 'f244';
}
p {
color: silver;
}
p:empty {
color: red;
}
Co liczy się jako puste?
Kiedy pierwszy raz się na to natknąłem, nie było dla mnie jasne, co ten selektor uznaje za puste. Trzymajmy się tutaj definicji z MDN:
Pseudoklasa CSS :empty reprezentuje każdy element, który nie ma dzieci. Dziećmi mogą być węzły elementów albo tekst (w tym białe znaki). Komentarze, instrukcje przetwarzania i treść generowana przez CSS nie wpływają na to, czy element zostanie uznany za pusty.
:empty
Dopóki nie ma białych znaków, element jest pusty.
<p></p>
Komentarz w środku nadal liczy się jako pusty element. Byle bez białych znaków.
<p><!-- comment --></p>
Nie :empty
Biały znak sprawia, że element nie jest pusty. Nowa linia też jest białym znakiem, więc: nie pusty! Powtarzam to z uporem, bo sam popełniłem ten sam błąd.
<p> </p>
<p>
<!-- comment -->
</p>
Element potomny również oznacza, że element nie jest pusty
<p><span></span></p>
Białe znaki w przyszłej specyfikacji
Dobra wiadomość jest taka, że w Selectors Level 4 białe znaki będą liczone jako puste. Selektor zacznie więc działać tak jak :-moz-only-whitespace. Innymi słowy, to zostanie uznane za puste:
<p> </p>
ALE na razie na tym nie polegaj. Żadna przeglądarka jeszcze tego nie obsługuje.
Przykłady użycia :empty
Zobaczmy kilka realnych zastosowań :empty.
Użycie :empty przy komunikacie błędu w formularzu
To właśnie ten przypadek pokazał mi :empty. Chciałem postawić ikonę przed komunikatem błędu. Kłopot polegał na tym, że ikona pojawiała się także wtedy, gdy żadnego komunikatu nie było. Nic prostszego: :empty pozwala dodać ikonę tylko wtedy, gdy jest co wyświetlić.
CSS
.error:before {
color: red;
content: '274c '; /* ❌ ikona */
}
HTML
<!-- Pas de message d'erreur -->
<div class="error"></div>
<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>
Wynik
Bez empty
❌❌ Email manquant
Z :empty
❌ Email manquant
Użycie :empty w alertach
Oto drugi przykład, w którym :empty ukrywa stan pusty.
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Message d'alerte</div>
Wynik
Bez :empty
Message d’alerte
Z :empty
Message d’alerte
Wsparcie przeglądarek
Wsparcie jest naprawdę dobre. Radzi sobie z tym każda przeglądarka aż do Internet Explorera 9
