CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/only-child

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Selektor :only-child spricht ein Element an, welches das einzige Kind seines Elternelementes ist.

  • CSS 3.0
  • IE 9
  • Firefox
  • Safari
  • Chrome
  • Opera
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]