CSS :empty-Pseudoklasse

Die CSS-Pseudoklasse :empty wählt Elemente aus, die keine Kindelemente und keinen Textinhalt haben.

Die Pseudoelemente ::before und ::after beeinflussen die Leere eines Elements nicht, selbst wenn sie sich innerhalb des Elements befinden.

Wenn direkt auf das öffnende Tag ein schließendes Tag folgt, gilt das Element als leer.

Selbstschließende Elemente wie <hr />, <br /> und <img /> gelten als leer und entsprechen dem Selektor :empty.

Version

Selectors Level 3

Selectors Level 4

INFO

Selectors Level 4 behält für :empty dasselbe Verhalten wie Level 3 bei und stimmt nur mit Elementen überein, die absolut keine Kinder haben.

Syntax

CSS :empty syntax example

css

:empty {
  css declarations;
}

Beispiel für den Selektor `:empty` mit dem Tag `<p>`:

CSS :empty example code

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:empty {
        width: 200px;
        height: 30px;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <p></p>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Beispiel für den Selektor `:empty` mit dem Tag `<div>`:

CSS :empty another code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:empty {
        background-color: #ccc;
        padding: 15px;
        width: 50%;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <div></div>
    <p>
      Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Practice

What does the :empty pseudo-class in CSS represent?

Affects elements with no children (including text nodes).Affects elements with uppercase text content.A filter for removing empty elements from the DOM.Affects elements with no text content.

CSS :empty-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den Selektor :empty mit dem Tag <p>: ​