: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

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 so geändert, dass sie wie :-moz-only-whitespace funktioniert, aber derzeit unterstützt kein Browser dies.

Syntax

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

Barrierefreiheit

Assistive Technologien wie Screenreader können keine interaktiven Inhalte parsen, die leer sind. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der erstellt wird, indem ein Textwert für das übergeordnete Element der interaktiven Steuerung bereitgestellt wird (Anker, Buttons usw.). Zugängliche Namen machen die interaktive Steuerung dem Barrierefreiheitsbaum zugänglich, einer API, die Informationen bereitstellt, die für assistive Technologien nützlich sind.

Der Text, der den zugänglichen Namen der interaktiven Steuerung bereitstellt, kann mit einer Kombination von Eigenschaften versteckt werden, die ihn visuell vom Bildschirm entfernt, aber für assistive Technologien parsbar hält. Dies wird häufig bei Buttons verwendet, die ausschließlich auf ein Symbol zur Zweckvermittlung vertrauen.

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