Ü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
Grundlegende UnterstützungChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung JaFirefox 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 JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10Safari iOS Vollständige Unterstützung 3.1Samsung Internet Android Vollständige Unterstützung Ja
Matches elements with no parentChrome Vollständige Unterstützung 57Edge ? Firefox Vollständige Unterstützung 52IE ? Opera Vollständige Unterstützung 44Safari ? WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Edge Mobile ? Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 44Safari iOS ? Samsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Schlagwörter des Dokuments und Mitwirkende

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