: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 angesehen 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 dahingehend geändert, dass sie wie :-moz-only-whitespace funktioniert, aber noch wird dies von keinem Browser unterstützt.

Syntax

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

Barrierefreiheit

Hilfstechnologien wie Screenreader können interaktive Inhalte, die leer sind, nicht einlesen. Alle interaktiven Inhalte müssen einen zugänglichen Namen haben, der erstellt wird, indem man dem übergeordneten Element der interaktiven Steuerung (Anchors, Buttons, etc.) einen Textwert hinzufügt. Zugängliche Namen machen die interaktive Steuerung dem Zugänglichkeit-Baum zugänglich, einer API, die Informationen liefert, die für Hilfstechnologien nützlich sind.

Der Text, der den zugänglichen Namen der interaktiven Steuerung bereitstellt, kann durch eine Kombination von Eigenschaften verborgen werden, die ihn visuell vom Bildschirm entfernen, aber von Hilfstechnologien lesbar bleiben. Dies wird häufig für Buttons verwendet, die sich ausschließlich auf ein Symbol verlassen, um ihre Funktion zu vermitteln.

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

Siehe auch