: jedynak - CSS-Tricks | Almanach CSS 2025

Właściwość :only-childselektora pseudoklasy w CSS reprezentuje element, który ma element nadrzędny i którego element nadrzędny nie ma innych elementów potomnych. Byłoby to to samo co :first-child:last-childlub :nth-child(1):nth-last-child(1), ale z mniejszą swoistością.

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

Na przykład, jeśli zagnieździmy akapity w podobnym…


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

Teraz możemy tylko stylizować

naszego pierwszego dziecka . Kolejny i jego dzieci nigdy nie będą stylizowane, ponieważ kontener nadrzędny zawiera więcej niż jedno dziecko (tj. Znaczniki p).

p:only-child ( color:red; )

Moglibyśmy również łączyć dodatkowe pseudoklasy, jak w tym przykładzie, które wybierają pierwszy akapit w naszym zagnieżdżonym elemencie div i jedyne dziecko div.contain.


Hello World
some more children

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

:only-childnie będzie działał jako selektor, jeśli element nadrzędny zawiera więcej niż jedno dziecko z identycznym znacznikiem. Na przykład…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Dzięki temu żadne elementy div nie będą dziedziczyć koloru czerwonego, ponieważ element nadrzędny zawiera więcej niż 1 element podrzędny (3 nienazwane elementy div).

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.