:empty

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

Hinweis: In Selektoren Level 4 wurde die :empty Pseudoklasse so geändert, dass sie wie :-moz-only-whitespace funktioniert, aber derzeit unterstützt dies noch kein Browser.

Syntax

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

Barrierefreiheit

Assistive Technologien wie Bildschirmlesegeräte können interaktive Inhalte, die leer sind, nicht interpretieren. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der durch Bereitstellung eines Textwertes für das übergeordnete Element des interaktiven Steuerelements erstellt wird (Links, Schaltflächen usw.). Zugängliche Namen machen das interaktive Steuerelement für den Barrierefreiheit-Baum sichtbar, eine API, die Informationen für assistive Technologien bereitstellt.

Der Text, der den zugänglichen Namen des interaktiven Steuerelements bereitstellt, kann mithilfe einer Kombination von Eigenschaften verborgen werden, die ihn visuell vom Bildschirm entfernen, aber für assistive Technologien interpretierbar lassen. Dies wird häufig für Schaltflächen verwendet, die ausschließlich auf ein Symbol angewiesen sind, um einen Zweck zu übermitteln.

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