: ainult-laps - CSS-trikid | CSS-i almanahh 2025

:only-childPseudo-klassi valijat vara CSS on element, mis on vanem element, kelle vanem element ei ole muud element lastele. See oleks sama mis :first-child:last-childvõi :nth-child(1):nth-last-child(1), kuid väiksema spetsiifikaga.

div p:only-child ( color: red; )

Näiteks kui me pesitseme lõike sarnases sees ...


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üüd saame stiili ainus

meie esimesest lapsest . Järgnevad ja selle lapsed ei kujundata kunagi, kuna vanemkonteiner mahutab rohkem kui ühe lapse (st p-sildid).

p:only-child ( color:red; )

Võiksime ka segada täiendavaid pseudoklasse, nagu see näide, mis valib meie pesastatud div-i esimese lõigu ja ainsa lapse div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childei tööta valijana, kui teie vanemelement sisaldab rohkem kui ühte identse märgendiga last. Näiteks…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Selle tulemusena ei päri ükski div punast värvi, kuna vanem sisaldab rohkem kui 1 last (3 nimetut div-i).

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.