Ü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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2 1.5 (1.8) 9 9.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.8) 9 10.0 3.1

 

Schlagwörter des Dokuments und Mitwirkende

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