CSS/Selektoren/empty

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der :empty-Selektor als strukturelle Pseudoklasse ermöglicht im Gegensatz zu empty-cells, das nur Auswirkungen auf Tabellenzellen hat, beliebige leere Elemente zu selektieren.

Syntax :empty
Browsersupport Details: caniuse.com
Beispiel
:empty { 
  background: red; 
  padding: 0 0.5em; 
}
In diesem Beispiel erhalten alle leeren Elemente einen roten Hintergrund und einen links- und rechtsseitigen Innenabstand.
Beachten Sie: Auch wenn ein Element vermeintlich leer ist, bereits bei einem Leerzeichen wie   wirkt dieser Selektor nicht mehr.

Siehe auch

Weblinks

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel Pseudoklasse empty</title> <style> table { table-layout: fixed; border-collapse: collapse; } td, th { border: 1px solid; min-width: 1em; } :empty { background: red; padding: 0 0.5em; } </style> </head> <body> <h1>Die Pseudoklasse :empty</h1> <table> <tbody> <tr><th>1</th><td></td></tr> <tr><th>2</th><td>nicht leer</td></tr> <tr><th>3</th><td>leeres Spanelement:<span></span></td></tr> <tr><th>4</th><td><span></span></td></tr> <tr><th>5</th><td> </td></tr> </tbody> </table> </body> </html>

In diesem Beispiel erhalten alle leeren Elemente einen roten Hintergrund und einen links- und rechtsseitigen Innenabstand.

  1. leeres td-Element, padding lässt sich nicht auf Tabellenzellen anwenden
  2. nicht leer, enthält Text
  3. nicht leer, enthält Text und ein weiteres Element, das selbst aber leer ist
  4. nicht leer, enthält ein weiteres (leeres) Element
  5. nicht leer, enthält Text, nämlich ein Leerzeichen