:empty

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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 geändert, um wie :-moz-only-whitespace zu fungieren, aber derzeit unterstützt dies kein Browser.

Syntax

css

:empty {
  /* ... */
}

Barrierefreiheit

Assistierende Technologien wie Bildschirmleser können interaktive Inhalte nicht interpretieren, 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 Steuerelements (Anker, Buttons, etc.) bereitgestellt wird. Zugängliche Namen machen das interaktive Steuerelement dem Zugänglichkeitsbaum zugänglich, einer API, die assistierenden Technologien nützliche Informationen zur Verfügung stellt.

Der Text, der den zugänglichen Namen des interaktiven Steuerelements bereitstellt, kann mithilfe einer Kombination aus Eigenschaften ausgeblendet werden, die ihn visuell vom Bildschirm entfernen, aber dennoch für assistierende Technologien interpretierbar halten. Dies wird häufig für Buttons verwendet, die ausschließlich auf ein Symbol angewiesen sind, um den Zweck 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

body {
  display: flex;
  justify-content: space-around;
}

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

:-moz-only-whitespace – Die präsentierte Implementierung der Änderungen in Selectors Level 4
:blank

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden