:empty CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die :empty CSS Pseudoklasse repräsentiert jedes Element, das keine Kinder hat. Kinder können entweder Element-Knoten oder Text (einschließlich Leerzeichen) sein. Kommentare, Verarbeitungshinweise und CSS content beeinflussen nicht, ob ein Element als leer betrachtet wird.
Probieren Sie es aus
div:empty {
outline: 2px solid deeppink;
height: 1em;
}
<p>Element with no content:</p>
<div></div>
<p>Element with comment:</p>
<div><!-- A comment --></div>
<p>Element with nested empty element:</p>
<div><p></p></div>
Hinweis:
In Selectors Level 4 wurde die :empty Pseudoklasse verändert, um wie :-moz-only-whitespace zu agieren, aber kein Browser unterstützt dies derzeit.
Syntax
:empty {
/* ... */
}
Barrierefreiheit
Unterstützende Technologien wie Screenreader können interaktiven Inhalt, der leer ist, nicht parsen. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der erzeugt wird, indem ein Textwert für das Elternelement des interaktiven Steuerungselements bereitgestellt wird (Anker, Buttons, etc.). Zugängliche Namen machen das interaktive Steuerungselement für den Barrierefreiheitsbaum zugänglich, eine API, die Informationen überträgt, die für unterstützende Technologien nützlich sind.
Der Text, der den zugänglichen Namen des interaktiven Steuerungselements bereitstellt, kann mittels einer Kombination von Eigenschaften versteckt werden, die ihn visuell vom Bildschirm entfernt, ihn aber für unterstützende Technologien parsbar hält. Dies wird häufig für Buttons verwendet, die ausschließlich auf ein Icon setzen, um ihren Zweck zu vermitteln.
Beispiele
HTML
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
<p>
<!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
</p>
</div>
CSS
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # the-empty-pseudo |
Browser-Kompatibilität
Siehe auch
:-moz-only-whitespace– Die präfixierte Implementierung der Änderungen in Selectors Level 4:blank