DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der :only-of-type Pseudo-Klassen-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, wird jeder Tag abgeglichen (z. B. :only-of-type). Wenn ein anderer Selektor vorangestellt ist, wird basierend auf dem Tag-Typ des Selektors abgeglichen. Zum Beispiel verhält sich .example:only-of-type wie p:only-of-type, wenn .example auf ein Absatz-Element angewendet wird.
Einfaches Beispiel
Eine Liste enthält nur ein einziges Listenelement. Eine andere Liste enthält drei Listenelemente. Wir können das alleinstehende Listenelement mit :only-of-type ansprechen.
Obwohl das vielleicht kein gutes Beispiel ist, da :only-child dort genauso gut funktionieren würde, da Listenelemente die einzig möglichen Kinder von Listen sind. Wenn wir stattdessen Divs verwenden, könnten wir einen Absatz in einem Div ansprechen, wenn es der einzige Absatz ist, obwohl auch andere Elemente darin vorhanden sind.
Zur Erinnerung
Als lustiger Nebeneffekt könnte man die gleiche Auswahl wie mit :only-of-type mit :first-of-type:last-of-type oder :nth-of-type(1):nth-last-of-type(1) erreichen. Diese verwenden jedoch zwei verkettete Selektoren, was bedeutet, dass die Spezifität doppelt so hoch ist wie bei :only-of-type.
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | IE9+ | Alle | Alle |
Zuerst einmal danke für die Veröffentlichung und das Teilen Ihres Wissens, ich könnte ohne nicht arbeiten!
Ich habe :only-of-type heute zum ersten Mal verwendet und es scheint auf spans, p's, img's, aber nicht auf div's angewendet zu werden, ist das richtig?