mozilla

:only-child

Dieser Artikel benötigt eine redaktionelle Überprüfung.

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Ü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 Elters</span>
</div>

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

Ergebnis

Ein Listen-Beispiel

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.
Working Draft Keine Änderung.
Selectors Level 3
Die Definition von ':only-child' in dieser Spezifikation.
Recommendation Ausgangs-Definition.

Browser-Kompatibilität

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: HerrSerker
Zuletzt aktualisiert von: HerrSerker,