CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/only-child
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoklasse
Der Selektor :only-child spricht ein Element an, welches das einzige Kind seines Elternelementes ist.
Beispiel
ansehen …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Beispiel: Pseudoklasse only-child</title>
<style>
body { width: 30em; }
li:only-child { border: 3px solid blue; }
</style>
</head>
<body>
<h1>Die Pseudoklasse <code>:only-child</code></h1>
<ul>
<li>1. Listenelement</li>
<li>2. Listenelement</li>
<li>3. Listenelement</li>
</ul>
<ul>
<li>4. Listenelement</li>
</ul>
</body>
</html>
In diesem Beispiel erhält nur das 4. Listenelement einen blauen Rahmen, weil es das einzige Listenelement in seiner Liste ist.
Beachten Sie:
:only-child ist identisch zu :first-child:last-child, :first-child:nth-last-child(1), :nth-child(1):last-child sowie :nth-child(1):nth-last-child(1) allerdings mit anderer Spezifität.Weblinks[Bearbeiten]
- CSS3 structural pseudo-class selector tester (Lea Verou)
