:empty

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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, Verarbeitungshinweise und CSS content beeinflussen nicht, ob ein Element als leer betrachtet wird.

Probieren Sie es aus

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 dies.

Syntax

css
:empty {
  /* ... */
}

Barrierefreiheit

Hilfstechnologien wie Screenreader können keine interaktiven Inhalte analysieren, die leer sind. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der durch die Bereitstellung eines Textwerts für das übergeordnete Element der interaktiven Steuerung (Anker, Buttons usw.) erstellt wird. Zugängliche Namen machen die interaktive Steuerung im Barrierefreiheitsbaum sichtbar, einer API, die Informationen für Hilfstechnologien bereitstellt.

Der Text, der den zugänglichen Namen der interaktiven Steuerung bereitstellt, kann mithilfe einer Kombination von Eigenschaften versteckt werden, die ihn visuell vom Bildschirm entfernt, ihn aber für Hilfstechnologien weiterhin analysierbar hält. Dies wird häufig für Buttons verwendet, die sich ausschließlich auf ein Symbol zur Zweckvermittlung stützen.

Beispiele

HTML

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

css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

Ergebnis

Spezifikationen

Specification
Selectors Level 4
# the-empty-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:empty
Matches elements with whitespace

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch