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

Die :empty CSS Pseudoklasse repräsentiert jedes Element, das keine Kinder hat. Kinder können entweder Element-Knoten oder Text sein (einschließlich Leerzeichen). Kommentare, Verarbeitungsanweisungen 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 geändert, um wie :-moz-only-whitespace zu funktionieren, aber kein Browser unterstützt dies derzeit.

Syntax

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

Barrierefreiheit

Assistive Technologien wie Bildschirmlesegeräte können keine interaktiven Inhalte verarbeiten, die leer sind. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der erstellt wird, indem ein Textwert für das übergeordnete Element des interaktiven Elements bereitgestellt wird (Anker, Schaltflächen, etc.). Zugängliche Namen machen das interaktive Element für den Barrierefreiheitsbaum sichtbar, eine API, die Informationen zur Verfügung stellt, die für assistive Technologien nützlich sind.

Der Text, der den zugänglichen Namen des interaktiven Elements bereitstellt, kann mit einer Kombination von Eigenschaften versteckt werden, die ihn visuell vom Bildschirm entfernt, ihn aber für assistive Technologien weiterhin lesbar hält. Dies wird häufig für Schaltflächen verwendet, die ausschließlich auf ein Symbol zur Zweckvermittlung angewiesen sind.

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