Übersicht

Die CSS Pseudo-Klasse :only-child  repräsentiert ein Element, welches das einzige Kindeelement innerhalb seines Elternelementes ist. Das ist das gleiche wie :first-child:last-child oder :nth-child(1):nth-last-child(1), nur mit einer geringeren Spezifizität.

Syntax

parent child:only-child {
  property: value;
} 

Beispiele

Einfaches Beispiel

span:only-child {
  color: red;
}
<div>
  <span>Dieser span ist das einzige Kind seines Elternteils</span>
</div>

<div>
  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
</div> 

Ergebnis

Ein Beispiel für Listen

li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
<ol>
  <li>Erstens
    <ul>
      <li>Einziges Kind
    </ul>
  </li>
  <li>Zweitens
    <ul>
      <li>Diese Liste hat zwei Elemente
      <li>Diese Liste hat zwei Elemente
    </ul>
  </li>
  <li>Drittens
    <ul>
      <li>Diese Liste hat drei Elemente
      <li>Diese Liste hat drei Elemente
      <li>Diese Liste hat drei Elemente
    </ul>
  </li>
<ol>

Ergebnis


Spezifizierungen

Spezifizierung Status Kommentar
Selectors Level 4
Die Definition von ':only-child' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung.
Selectors Level 3
Die Definition von ':only-child' in dieser Spezifikation.
Empfehlung Ausgangs-Definition.

Browser-Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:only-childChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung 12Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 3.1Samsung Internet Android Vollständige Unterstützung Ja
Matches elements with no parentChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, RmnWtnkmp, HerrSerker
Zuletzt aktualisiert von: mdnwebdocs-bot,