:empty | CSS-Tricks

Matt DeCamp am 27. April 2021

Die CSS-Pseudoklasse :empty wählt jedes Element aus, das für einen gegebenen Selektor keine Kindelemente enthält.

/* Changes the background color of every empty section element */
section:empty {
  background-color: tomato;
}

Wenn wir diesen Code auf einer Seite ausführen würden, würde CSS nach einem <section>-Element suchen, das keinen Inhalt zwischen den Tags enthält. Das könnte etwa so aussehen:

<section>
  <p>I have content</p>
</section>

<section>
  <p>I have content, too!</p>
</section>

<section> // HIGHLIGHT
  <!-- No content, just an HTML comment. 🎺 -->
</section>

Was macht ein Element „leer“?

Ein Element ohne etwas zwischen seinen Tags ist leer.

<div></div>

Das schließt ein, wenn ein Element einen Code-Kommentar enthält.

<div><!--I'm still empty, even with this comment. --></div>

Und wenn der CSS für das Element generierten content hat – wie von einem Pseudo-Element wie ::before oder ::after – wird es ebenfalls immer noch als leer betrachtet.

div::before {
  content: "Yep, still empty!;"
}

Elemente mit Kindern (auch „nicht leere“ Elemente genannt)

Ein Element hat „Kinder“, wenn es einen anderen Elementknoten, Text oder sogar textuelle Leerzeichen zwischen seinen Tags enthält. Die Elemente im folgenden Code gelten als „nicht leere“.

<article>
  <h1>I'm a child of this article element.</h1>
</article>

<p>This text is considered a child.</p>

<!-- Even whitespace between tags qualifies this element as "non-empty" -->
<h1>   </h1>

Aber Vorsicht! Code-Editoren können unerwünschte Leerzeichen erzeugen, wodurch ein ansonsten leeres Element zu einem nicht leeren wird.

<section>
  <!-- The white space in this element makes it a "non-empty" element -->
</section>

Verhält sich jetzt wie `:-moz-only-whitespace`s

:empty wurde aktualisiert, um sich wie Mozillas Präfix-:moz-only-whitespace-Pseudoklasse in der Selectors Level 4 Spezifikation zu verhalten. Ähnlich wie :empty wählt :moz-only-whitespace leere Elemente aus. Der Unterschied ist, dass :moz-only-whitespace auch Elemente auswählt, die nur *textuelle* Leerzeichen enthalten. Die Spezifikation erklärt dies äußerst gut.

In den Level 2 und 3 von Selectors passte :empty nicht zu Elementen, die nur Leerzeichen enthielten. Dies wurde geändert, sodass – da Leerzeichen in HTML weitgehend kollabierbar sind und daher zur Formatierung des Quellcodes verwendet werden, und insbesondere weil Elemente mit ausgelassenen End-Tags solche Leerzeichen wahrscheinlich in ihren DOM-Textinhalten absorbieren – Elemente, die Autoren als leer empfinden, durch diesen Selektor ausgewählt werden können, wie sie es erwarten.

Also ja. Diese Änderung wird :empty eher so verhalten lassen, wie wir es erwarten, sodass selbst wenn bestimmte Elemente (z. B. <br>) oder Formatierungsleerzeichen innerhalb eines Elements vorhanden sind, diese nicht verhindern, dass ein Element als leer betrachtet wird.

Derzeit gibt es jedoch keine Browserunterstützung für diese Änderung.

Nicht ideal für die Formularvalidierung

Man sollte meinen, es wäre so! Aber wenn wir :empty auf ein <input> anwenden und hoffen, es rot zu färben, um dem Benutzer zu zeigen, dass es ausgefüllt werden muss, wird dieses Eingabefeld immer rot sein.

Warum ist das so? Weil :empty nach leerem Containerinhalt sucht, aber Eingabefelder als leere Elemente gelten, obwohl Inhalt hineingeschrieben werden kann.

Demo

Leeres Navigations-Item

In diesem Beispiel wird ein li-Element in der Navigation entfernt, wenn es keinen Inhalt hat. Klicken Sie auf die Schaltfläche, um den leeren Zustand für das dritte Navigationselement umzuschalten.