Ü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
BCD tables only load in the browser