CSS :empty Pseudo-Klasse
Die CSS :empty-Pseudo-Klasse wählt leere Elemente aus. Lesen Sie mehr und üben Sie mit Beispielen.
Die CSS :empty-Pseudo-Klasse wählt Elemente aus, die überhaupt keine Kinder haben — weder untergeordnete Elemente noch Textinhalt. Sie ist besonders nützlich, um „leere" Container zu gestalten oder auszublenden, die aus einem Template, einem CMS oder einer API ohne Inhalt zurückgegeben werden, damit sie keine unerwünschten Lücken auf der Seite hinterlassen.
Diese Seite erklärt, wie :empty bestimmt, ob ein Element leer ist, das häufige Fallstrick mit Leerzeichen, eine praktische Anwendung zum Ausblenden leerer Blöcke sowie ausführbare Beispiele, die Sie bearbeiten können.
Was als leer gilt
Ein Element entspricht :empty, wenn zwischen seinem öffnenden und schließenden Tag nichts steht — kein Text, keine Kommentare als Inhalt und keine verschachtelten Elemente:
- Folgt dem öffnenden Tag direkt das schließende Tag (
<p></p>), ist das Element leer. - Selbstschließende Elemente wie
<hr />,<br />und<img />können keine Kinder haben und treffen daher immer auf:emptyzu. - Die
::before- und::after-Pseudo-Elemente gelten nicht als Kinder. Ein Element mit generiertem Inhalt aus::before/::aftertrifft weiterhin auf:emptyzu, da dieser Inhalt nicht Teil des DOM ist.
Der Leerzeichen-Fallstrick
Leerzeichen gelten als Textinhalt, daher ist ein Element nicht leer, wenn es Leerzeichen, Tabulatoren oder Zeilenumbrüche enthält:
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->Dies ist der häufigste Grund, warum :empty „nicht funktioniert": Ein Template, das seine Ausgabe formatiert, hinterlässt Leerzeichen zwischen den Tags. Wenn Sie Elemente abgleichen möchten, die nur Leerzeichen enthalten, schauen Sie sich die :blank-Pseudo-Klasse an (noch experimentell) oder entfernen Sie die Leerzeichen aus Ihrem Markup. Um Elemente stattdessen nach anderen Bedingungen auszuwählen, siehe :not().
Syntax
CSS :empty Syntax-Beispiel
:empty {
css declarations;
}Beispiel des :empty-Selektors mit dem <p>-Tag:
CSS :empty Beispielcode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Beispiel des :empty-Selektors mit dem <div>-Tag:
CSS :empty weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Leere Elemente ausblenden
Eine häufige praktische Anwendung ist das Einklappen eines leer angekommenen Elements, damit es keinen Rand, Rahmen oder Hintergrund-Lücken hinterlässt. Kombinieren Sie :empty mit display: none:
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}Nun wird <div class="alert"></div> aus dem Layout entfernt, während <div class="alert">Saved!</div> normal gerendert wird. So bleibt Ihr CSS für das visuelle Ergebnis verantwortlich, anstatt serverseitige Logik zu benötigen, die das Element weglässt.
Browserunterstützung und Version
:empty wird von allen modernen Browsern unterstützt. Es wurde in zwei Spezifikationen definiert, beide mit demselben Verhalten:
Selectors Level 4 behält dasselbe Verhalten für :empty wie Level 3 bei und trifft nur auf Elemente zu, die absolut keine Kinder haben — Text, Kommentare und verschachtelte Elemente disqualifizieren eine Übereinstimmung.