CSS/Selektoren/empty

Browserunterstützung
caniuse.com

Der :empty-Selektor als strukturelle Pseudoklasse ermöglicht im Gegensatz zu empty-cells, das nur Auswirkungen auf Tabellenzellen hat, beliebige leere Elemente zu selektieren, die keine untergeordneten Elemente und keinen Textinhalt (nicht einmal Leerzeichen) haben.

Syntax

:empty

Beispiel

img:empty { 
  background: red; 
  padding: 0 0.5em; 
}
.bio:empty::before {
  content: "No bio available.";
  color: red;
  font-style: italic;
}

In diesem Beispiel erhalten alle leeren img-Elemente einen roten Hintergrund und einen links- und rechtsseitigen Innenabstand.
Containerm it der Klasse .bio erhalten einen roten Warnhinweis, dass kein Inhalt verfügbar ist.

Beachten Sie: In Level 2 und Level 3 matchte :empty nicht bei Elementen, die Zeilenumbrüche oder Leerzeichen wie   enthielten.
Dies wurde geändert, damit – da Zeilenumbrüche und Leerzeichen in HTML für die Formatierung von Quellcode verwendet werden und insbesondere weil Elemente mit ausgelassenen End-Tags solche Leerzeichen wahrscheinlich in ihren DOM-Textinhalt aufnehmen – Elemente, die Autoren als leer empfinden, mit diesem Selektor wie erwartet ausgewählt werden können.
Dies wird aber noch von keinem Browser unterstützt - Firefox hat dieses Verhalten mit :-moz-only-whitespace bereits implementiert.

Siehe auch

• 

  strukturelle Pseudoklassen

  Elemente aufgrund ihrer Position im DOM selektieren

   
• 

  Gestaltung mit CSS
  • Kopf- und Datenzellen gestalten
  • Zebrastreifen
  • Zeilenüberschriften
   
• empty-cells
  Leere Tabellenzellen kennzeichnen
   

Weblinks

• CSSWG: pseudo-element Selectors Level 4
• MDN: selectors :empty
• Browser-Support: caniuse.com

Anwendungsbeispiel

Kennzeichnung leerer Tabellenzellen mit :empty ansehen …

:empty { 
  background: red; 
  padding: 0 0.5em; 
}

    <table>
      <tbody>
        <tr><th>1</th><td></td></tr>
	<tr><th>2</th><td>nicht leer</td></tr>
	<tr><th>3</th><td>leeres Spanelement:<span></span></td></tr>
	<tr><th>4</th><td><span></span></td></tr>
        <tr><th>5</th><td>&nbsp;</td></tr>
      </tbody>
    </table>

In diesem Beispiel erhalten alle leeren Elemente einen roten Hintergrund und einen links- und rechtsseitigen Innenabstand.

1. leeres td-Element, padding lässt sich nicht auf Tabellenzellen anwenden
2. nicht leer, enthält Text
3. nicht leer, enthält Text und ein weiteres Element, das selbst aber leer ist
4. nicht leer, enthält ein weiteres (leeres) Element
5. nicht leer, enthält Text, nämlich ein Leerzeichen

Ausblenden leerer Cards

Wenn Inhalte dynamisch eingefügt werden (CMS, React, Vue, API-Daten usw.), werden Container manchmal gerendert, sind aber am Ende leer.

Ausböenden leerer Elemente

.card:empty {
  display: none;
}

Dies verhindert verhindert unschöne Lücken in Layouts.

Rekursives Löschen leerer Elemente

Wenn man mit querySelectorAll(':empty') alle leeren Elemente löschen will, klappt das oft nicht, weil querySelectorAll eine statische NodeList zurückgibt.

Wenn du Elemente entfernst, werden andere Elemente eventuell erst danach :empty, sind aber nicht mehr in der ursprünglichen NodeList enthalten.

„Fehler“ beim Löschen leerer Elemente?

<div>
  <div></div>
</div>

Das innere ist :empty, das äußere nicht.

Wenn du das innere entfernst, wird das äußere jetzt :empty — aber es war nicht Teil der ursprünglichen Auswahl.

Deshalb muss man rekursiv prüfen, bis kein leeres Element mehr vorhanden ist.

titel=rekursives Löschen leerer Elemente

let found;
do {
  found = false;
  const empties = document.querySelectorAll(':empty');
  for (const el of empties) {
    el.remove();
    found = true;
  }
} while (found);