:only-child

Die :only-child Pseudo-Klassen-Selektoreigenschaft in CSS repräsentiert ein Element, das ein Elternelement hat und dessen Elternelement keine anderen Element-Kinder hat. Dies wäre dasselbe wie :first-child:last-child oder :nth-child(1):nth-last-child(1), aber mit geringerer Spezifität.

div p:only-child {
  color: red;
}

Wenn wir zum Beispiel Absätze in einem <div> wie folgt verschachteln...

<div>
  <p>This paragraph is the only child of its parent</p>
</div>
 
<div>
  <p>This paragraph is the first child of its parent</p>
  <p>This paragraph is the second child of its parent</p>
</div>

Jetzt können wir den einzigen <p> unseres ersten Kind-<div> stylen. Der nachfolgende <div> und seine Kinder werden niemals gestylt, da der Elterncontainer mehr als ein Kind enthält (d.h. die p-Tags).

p:only-child {
  color:red;
}

Wir könnten auch zusätzliche Pseudo-Klassen wie in diesem Beispiel einmischen, das den ersten Absatz innerhalb unseres verschachtelten Divs und das only-child von div.contain auswählt.

<div class="contain">
  <div>
    <p>Hello World</p>
    <p>some more children</p>
  </div>
</div>

div.contain div:only-child :first-child {
  color: red;
}

:only-child funktioniert nicht als Selektor, wenn Ihr Elternelement mehr als ein Kind mit einem identischen Tag enthält. Zum Beispiel...

<div class="contain">
  <div>
    <h1>Div Child 1</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 2</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 3</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>
</div>

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).

Verwandte Eigenschaften

• :only-of-type
• :last-of-type
• :nth-child
• :nth-last-child

Weitere Ressourcen

• W3C CSS 2.1 Spec
• W3C CSS Level 3 Selectors Spec
• MDN Docs
• Web Platform Docs
• sitepoint

Browser-Unterstützung