: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

BCD tables only load in the browser

Siehe auch