De :only-childpseudo-class selector-eigenschap in CSS vertegenwoordigt een element dat een bovenliggend element heeft en waarvan het bovenliggende element geen andere onderliggende elementen heeft. Dit zou hetzelfde zijn als :first-child:last-childof :nth-child(1):nth-last-child(1), maar met een lagere specificiteit.
div p:only-child ( color: red; )Als we bijvoorbeeld alinea's nesten binnen een soortgelijke ...
This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent
Nu kunnen we de enige stylen
van ons eerste kind . De volgende en de onderliggende items worden nooit opgemaakt omdat de bovenliggende container meer dan één kind bevat (dwz de p-tags).
p:only-child ( color:red; )We zouden ook extra pseudo-klassen kunnen mixen zoals dit voorbeeld dat de eerste alinea binnen onze geneste div en het enige kind van selecteert div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childwerkt niet als selector als uw bovenliggende element meer dan één kind met een identieke tag bevat. Bijvoorbeeld…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Dit zal ertoe leiden dat er geen divs de kleur rood erven aangezien de ouder meer dan 1 kind bevat (de 3 niet nader genoemde divs).
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |