: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 Elementknoten oder Text sein (einschließlich Leerzeichen). Kommentare, Verarbeitungshinweise und CSS content beeinflussen nicht, ob ein Element als leer angesehen 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 so geändert, dass sie sich wie :-moz-only-whitespace verhält, aber derzeit unterstützt kein Browser diese Änderung.
Syntax
:empty {
/* ... */
}
Barrierefreiheit
Assistive Technologien wie Screenreader können interaktive Inhalte, die leer sind, nicht parsen. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der durch das Bereitstellen eines Textwertes für das übergeordnete Element der interaktiven Steuerung (Anker, Schaltflächen, etc.) geschaffen wird. Zugängliche Namen machen die interaktive Steuerung für den Zugangsbaum verfügbar, eine API, die Informationen liefert, die für assistive Technologien nützlich sind.
Der Text, der den zugänglichen Namen der interaktiven Steuerung bereitstellt, kann mithilfe einer Kombination von Eigenschaften verborgen werden, die ihn visuell vom Bildschirm entfernt, aber über assistive Technologien weiterhin parsbar hält. Dies wird häufig für Schaltflächen verwendet, die sich ausschließlich auf ein Icon zur Zweckvermittlung stützen.
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 geprefixede Implementierung der Änderungen in Selectors Level 4:blank