Der :only-of-typePseudoklassen-Selektor in CSS repräsentiert jedes Element, das keine Geschwister des angegebenen Typs hat.
p:only-of-type ( color: red; )Wenn dem Selektor kein Tag vorangestellt ist, stimmt es mit jedem Tag überein (z :only-of-type. B. ). Wenn ein anderer Selektor davor steht, wird er basierend auf dem Tag-Typ, mit dem der Selektor übereinstimmt, abgeglichen. Verhält sich beispielsweise .example:only-of-typeso, als p:only-of-typewürde .examplees auf ein Absatzelement angewendet.
Einfaches Beispiel
Eine Liste enthält nur ein einziges Listenelement. Eine andere Liste enthält drei Listenelemente. Wir können auf das Listenelement abzielen, mit dem wir alleine sind :only-of-type.
Obwohl das vielleicht nicht das beste Beispiel ist, weil :only-childes dort genauso gut funktionieren würde, da Listenelemente die einzig möglichen untergeordneten Elemente von Listen sind. Wenn wir stattdessen divs verwenden, können wir einen Absatz innerhalb eines div als Ziel festlegen, wenn dies der einzige Absatz ist, obwohl auch andere Elemente vorhanden sind.
Notieren
Abgesehen vom Spaß könnten Sie die gleiche Auswahl wie :only-of-typemit :first-of-type:last-of-typeoder erzielen :nth-of-type(1):nth-last-of-type(1). Diese verwenden jedoch zwei verkettete Selektoren, was bedeutet, dass die Spezifität doppelt so hoch ist wie die von :only-of-type.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Irgendein | Irgendein | Irgendein | Irgendein | IE9 + | Irgendein | Irgendein |