:only-childNäennäisluokkavalitsin omaisuus CSS edustaa elementti, joka on emoelementin ja joiden emoelementin ei ole muita elementtiä lapsia. Tämä olisi sama kuin :first-child:last-childtai :nth-child(1):nth-last-child(1), mutta pienemmällä spesifisyydellä.
div p:only-child ( color: red; )Esimerkiksi, jos pesimme kappaleita samanlaisiin ...
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
Nyt voimme tyylin ainoa
ensimmäisen lapsemme . Seuraavia ja sen lapsia ei koskaan tyylitetä, koska ylätason säilössä on useampi kuin yksi lapsi (ts. P-tunnisteet).
p:only-child ( color:red; )Voisimme myös sekoittaa muita näennäisluokkia, kuten tämä esimerkki, joka valitsee sisäkkäisen div: n ensimmäisen kappaleen ja ainoan lapsen div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childei toimi valitsimena, jos vanhempi elementti sisältää useamman kuin yhden lapsen, jolla on sama tunniste. Esimerkiksi…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Tämän seurauksena mikään div ei peri punaista väriä, koska vanhemmassa on enemmän kuin 1 lapsi (3 nimeämätöntä divia).
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |