: edini otrok - CSS-triki | Almanah CSS 2025

Lastnost :only-childizbirnega psevdorazreda v CSS predstavlja element, ki ima nadrejeni element in katerega nadrejeni element nima drugih podrejenih elementov. To bi bilo enako kot :first-child:last-childali :nth-child(1):nth-last-child(1), vendar z nižjo specifičnostjo.

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

Na primer, če odstavke ugnezdimo znotraj podobnega…


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

Zdaj lahko oblikujemo edino

našega prvega otroka . Naslednji in njegovi podrejeni elementi ne bodo nikoli oblikovani, saj ima nadrejeni vsebnik več kot en podrejeni element (tj. Oznake p).

p:only-child ( color:red; )

Lahko bi tudi pomešali dodatne psevdo-razrede, kot je ta primer, ki izbere prvi odstavek znotraj našega ugnezdenega divja in edini podrejen od div.contain.


Hello World
some more children

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

:only-childne bo deloval kot izbirnik, če ima nadrejeni element več kot enega podrejenega z isto oznako. Na primer ...


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Zaradi tega noben div ne bo podedoval rdeče barve, saj ima starš več kot 1 podrejenega (3 neimenovani divji elementi).

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.