:empty

Übersicht

Der pseudo-Klassen Selektor :empty wählt Elemente aus, die über kein Kindelement verfügen. Ein Inhalt in Form von einem Text wird dabei ebenfalls als ein Kind des Elementes angesehen, Kommentare und sonstige Verarbeitungsanweisungen jedoch nicht.

Syntax

<element>:empty { /* Deklarationsblock */ }

Beispiele

span:empty::before  {
  background-color: lime;
}

Die ersten beiden span Elemente sind leer, sodass der :empty Selektor angewendet wird. Auf die letzten drei trifft das jedoch nicht zu.

<span></span> 
<span><!-- Dieses Element wird grün dargestellt --></span>

<span> </span>
<span>Lorem ipsum</span>
<span><strong></strong></span>

Spezifikationen

Spezifikation Status Kommentar
Selectors Level 4
Die Definition von ':empty' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung
Selectors Level 3
Die Definition von ':empty' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:emptyChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung 2Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 3.1Samsung Internet Android Vollständige Unterstützung 1.0
Matches elements with whitespace
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 1106296.
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.