CSS/Selektoren/empty
Aus SELFHTML-Wiki
< CSS | Selektoren
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
- W3C: empty pseudo-element Selectors Level 4
Liste der CSS-Selektoren
- Pseudoklassen
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
Anwendungsbeispiel
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.
- leeres
td-Element, padding lässt sich nicht auf Tabellenzellen anwenden - nicht leer, enthält Text
- nicht leer, enthält Text und ein weiteres Element, das selbst aber leer ist
- nicht leer, enthält ein weiteres (leeres) Element
- nicht leer, enthält Text, nämlich ein Leerzeichen
