: pouze dítě - Triky CSS | Almanach CSS 2025

Vlastnost :only-childselektoru pseudotřídy v CSS představuje prvek, který má nadřazený prvek a jehož nadřazený prvek nemá žádné další podřízené prvky. To by bylo stejné jako :first-child:last-childnebo :nth-child(1):nth-last-child(1), ale s nižší specificitou.

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

Pokud například vnoříme odstavce do podobného typu, tak…


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

Nyní můžeme stylovat pouze jako jediní

našeho prvního dítěte . Následující a její podřízené položky nikdy nebudou stylizované, protože nadřazený kontejner obsahuje více než jedno podřízené zařízení (tj. Značky p).

p:only-child ( color:red; )

Mohli bychom také kombinovat další pseudotřídy, jako je tento příklad, který vybere první odstavec v rámci našeho vnořeného divu a jediného potomka div.contain.


Hello World
some more children

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

:only-childnebude fungovat jako selektor, pokud váš nadřazený prvek obsahuje více než jedno dítě se stejnou značkou. Například…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

To povede k tomu, že žádné divy nezdědí červenou barvu, protože rodič obsahuje více než 1 dítě (3 nepojmenované divy).

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.