1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. :only-child

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

:only-child

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die :only-child CSS-Pseudoklasse repräsentiert ein Element ohne Geschwister. Dies entspricht :first-child:last-child oder :nth-child(1):nth-last-child(1), jedoch mit einer geringeren Spezifität.

Probieren Sie es aus

li:only-child {
 color: fuchsia;
}
b:only-child {
 text-decoration: underline;
}
<p>Stars expected to attend:</p>
<ol>
 <li>Robert Downey, Jr.</li>
</ol>
<p>Stars yet to confirm:</p>
<ol>
 <li>Scarlett Johansson</li>
 <li>Samuel L. Jackson</li>
 <li>Chris Pratt</li>
</ol>
<p>The ceremony is going to be held in <b>The Dolby Theatre</b>.</p>

Syntax

css
:only-child {
 /* ... */
}

Beispiele

Einfaches Beispiel

HTML

html
<div>
 <div>I am an only child.</div>
</div>
<div>
 <div>I am the 1st sibling.</div>
 <div>I am the 2nd sibling.</div>
 <div>
 I am the 3rd sibling,
 <div>but this is an only child.</div>
 </div>
</div>

CSS

css
div:only-child {
 color: red;
}
div {
 display: inline-block;
 margin: 6px;
 outline: 1px solid;
}

Ergebnis

Ein Listenbeispiel

HTML

html
<ol>
 <li>
 First
 <ul>
 <li>This list has just one element.</li>
 </ul>
 </li>
 <li>
 Second
 <ul>
 <li>This list has three elements.</li>
 <li>This list has three elements.</li>
 <li>This list has three elements.</li>
 </ul>
 </li>
</ol>

CSS

css
li li {
 list-style-type: disc;
}
li:only-child {
 color: red;
 list-style-type: square;
}

Ergebnis

Spezifikationen

Specification
Selectors Level 4
# only-child-pseudo

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

AltStyle によって変換されたページ (->オリジナル) /