Meestal stylen we elementen die iets bevatten. Maar wat doe je met een element zonder kinderen of tekst? Simpel: daar gebruik je de selector :empty voor.
<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;
}
Wat geldt als leeg?
Toen ik hier voor het eerst tegenaan liep, was me niet meteen duidelijk wat deze pseudo-klasse precies als leeg beschouwt. Ik houd daarom de definitie van MDN aan:
De CSS-pseudo-klasse :empty selecteert elk element dat geen kinderen heeft. Kinderen kunnen elementknopen of tekst zijn, inclusief witruimte. Commentaar, processing instructions en CSS-content tellen niet mee bij de vraag of een element leeg is.
:empty
Zolang er geen spatie in staat, is het element leeg.
<p></p>
Ook een element met alleen commentaar ertussen telt als leeg. Zolang er maar geen spatie staat.
<p><!-- comment --></p>
Niet :empty
Witruimte telt als inhoud. Ook een regeleinde is witruimte, dus dat element is niet leeg. Ik hamer erop, want ik maakte precies dezelfde fout.
<p> </p>
<p>
<!-- comment -->
</p>
Een kindelement telt eveneens als inhoud
<p><span></span></p>
Witruimte in de komende specificatie
Het goede nieuws: in Selectors Level 4 gaat witruimte wél als leeg tellen. De selector werkt dan net als :-moz-only-whitespace. Met andere woorden, dit geldt straks als leeg:
<p> </p>
MAAR gebruik het nog niet. Op dit moment ondersteunt geen enkele browser dit.
Voorbeelden met :empty
Hieronder een paar concrete gevallen waarin :empty zijn werk doet.
:empty gebruiken voor een foutmelding in een formulier
Dit is het voorbeeld waardoor ik :empty leerde kennen. Ik wilde een icoon voor mijn foutmelding zetten, maar dat icoon verscheen ook wanneer er helemaal geen foutmelding was. Geen probleem: met :empty zet ik het icoon er alleen bij als er echt een melding staat.
CSS
.error:before {
color: red;
content: '274c '; /* ❌ icoon */
}
HTML
<!-- Pas de message d'erreur -->
<div class="error"></div>
<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>
Resultaat
Zonder empty
❌❌ Email manquant
Met :empty
❌ Email manquant
:empty gebruiken bij meldingen
Nog een voorbeeld waarin :empty de lege toestand verbergt.
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Message d'alerte</div>
Resultaat
Zonder :empty
Message d’alerte
Met :empty
Message d’alerte
Browserondersteuning
De ondersteuning is eigenlijk uitstekend: alle browsers doen mee, tot en met Internet Explorer 9
