Meistens gestalten wir Elemente, die Inhalt haben. Was aber, wenn ein Element weder Kindelemente noch Text enthält? Ganz einfach: Dafür gibt es den 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;
}
Was gilt als leer?
Als ich zum ersten Mal darüber gestolpert bin, war mir nicht klar, was diese Pseudoklasse überhaupt als leer ansieht. Halten wir uns hier an die Definition von MDN:
Die CSS-Pseudoklasse :empty steht für jedes Element, das keine Kinder hat. Kinder können Elementknoten oder Text sein, Leerraum eingeschlossen. Kommentare, Verarbeitungsanweisungen und CSS-Inhalt haben keinen Einfluss darauf, ob ein Element als leer gilt.
:empty
Solange kein Leerzeichen dazwischensteht, ist das Element leer.
<p></p>
Auch ein Kommentar dazwischen gilt weiterhin als leeres Element. Solange eben kein Leerzeichen dabei ist.
<p><!-- comment --></p>
Nicht :empty
Leerraum zählt als nicht leer. Selbst ein Zeilenumbruch ist Leerraum, also nicht leer! Ich betone das, weil ich genau in diese Falle getappt bin.
<p> </p>
<p>
<!-- comment -->
</p>
Ein Kindelement zählt ebenfalls als nicht leer
<p><span></span></p>
Leerraum in den kommenden Spezifikationen
Die gute Nachricht: In Selectors Level 4 gilt Leerraum als leer! Der Selektor verhält sich dann wie :-moz-only-whitespace. Mit anderen Worten, das hier gilt künftig als leer:
<p> </p>
ABER verlass dich noch nicht darauf. Aktuell unterstützt das kein einziger Browser.
Beispiele für den Einsatz von :empty
Sehen wir uns ein paar konkrete Anwendungen von :empty an.
:empty für die Fehlermeldung in einem Formular
An diesem Beispiel bin ich auf :empty gestoßen. Ich wollte meiner Fehlermeldung ein Icon voranstellen. Das Problem: Das Icon tauchte auch dann auf, wenn es gar keine Fehlermeldung gab. Kein Grund zur Sorge, mit :empty setze ich das Icon nur dann, wenn wirklich eine Meldung da ist.
CSS
.error:before {
color: red;
content: '274c '; /* ❌ Icon */
}
HTML
<!-- Pas de message d'erreur -->
<div class="error"></div>
<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>
Ergebnis
Ohne :empty
❌❌ Email manquant
Mit :empty
❌ Email manquant
:empty bei Alerts
Noch ein Beispiel, in dem :empty den leeren Zustand ausblendet.
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Message d'alerte</div>
Ergebnis
Ohne :empty
Message d’alerte
Mit :empty
Message d’alerte
Browser-Unterstützung
Die Unterstützung ist ausgesprochen gut. Alle Browser bis zurück zu Internet Explorer 9 beherrschen den Selektor
