: Einzelkind - CSS-Tricks | CSS-Almanach 2025

Die :only-childPseudo-Klassen-Selector-Eigenschaft in CSS stellt ein Element dar, das ein übergeordnetes Element enthält und dessen übergeordnetes Element keine anderen untergeordneten Elemente enthält. Dies wäre das gleiche wie :first-child:last-childoder :nth-child(1):nth-last-child(1), jedoch mit einer geringeren Spezifität.

div p:only-child ( color: red; )

Zum Beispiel, wenn wir Absätze innerhalb eines ähnlichen verschachteln ...


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Jetzt können wir das einzige stylen

unseres ersten Kindes . Das nachfolgende und seine untergeordneten Elemente werden niemals so gestaltet, dass der übergeordnete Container mehr als ein untergeordnetes Element enthält (dh die p-Tags).

p:only-child ( color:red; )

Wir könnten auch zusätzliche Pseudoklassen wie dieses Beispiel mischen, die den ersten Absatz in unserem verschachtelten div und das einzige Kind von auswählen div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childfunktioniert nicht als Selektor, wenn Ihr übergeordnetes Element mehr als ein untergeordnetes Element mit einem identischen Tag enthält. Zum Beispiel…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Dies führt dazu, dass keine Divs die Farbe Rot erben, da der Elternteil mehr als 1 Kind enthält (die 3 unbenannten Divs).

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.