Den :only-childpseudo-klasse selector eiendom i CSS representerer et element som har en forelder element og som forelder element har ingen andre element barn. Dette vil være det samme som :first-child:last-childeller :nth-child(1):nth-last-child(1), men med lavere spesifisitet.
div p:only-child ( color: red; )For eksempel, hvis vi hekker avsnitt i en lignende så ...
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
Nå kan vi style det eneste
av vårt første barn . Den påfølgende og dens barn vil aldri bli stylet da foreldrebeholderen har mer enn ett barn (dvs. p-kodene).
p:only-child ( color:red; )Vi kan også blande flere pseudoklasser som dette eksemplet som velger første avsnitt i vår nestede div og eneste barn av div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childfungerer ikke som velger hvis foreldreelementet ditt inneholder mer enn ett barn med identisk tag. For eksempel…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Dette vil resultere i at ingen divs arver fargen rød da foreldrene inneholder mer enn 1 barn (de 3 unavngitte divene).
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |