:empty
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die :empty CSS Pseudoklasse repräsentiert jedes Element, das keine Kinder hat. Kinder können entweder Elementknoten oder Text (einschließlich Leerzeichen) sein. Kommentare, Verarbeitungsanweisungen 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 geändert, um wie :-moz-only-whitespace zu handeln, aber derzeit unterstützt kein Browser dies.
Syntax
:empty {
/* ... */
}
Barrierefreiheit
Hilfstechnologien wie Bildschirmleser können interaktive Inhalte, die leer sind, nicht parsen. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der erstellt wird, indem man dem übergeordneten Element des interaktiven Steuerelements (Anker, Buttons, usw.) einen Textwert zuweist. Zugängliche Namen machen das interaktive Steuerelement für den Barrierefreiheitsbaum zugänglich, eine API, die Informationen bereitstellt, die für Hilfstechnologien nützlich sind.
Der Text, der den zugänglichen Namen des interaktiven Steuerelements bereitstellt, kann mit einer Kombination von Eigenschaften verborgen werden, die es visuell vom Bildschirm entfernen, aber von Hilfstechnologien weiterhin parsiert werden können. Dies wird häufig für Buttons verwendet, die sich ausschließlich auf ein Symbol verlassen, 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
| Specification |
|---|
| Selectors Level 4 # the-empty-pseudo |
Browser-Kompatibilität
Siehe auch
:-moz-only-whitespace– Die mit Präfix versehene Implementierung der Änderungen in Selectors Level 4:blank