: iba dieťa - Triky CSS | Almanach CSS 2025

Vlastnosť :only-childselektora pseudo-triedy v CSS predstavuje prvok, ktorý má nadradený prvok a ktorého nadradený prvok nemá žiadne ďalšie podradené prvky. To by bolo rovnaké ako :first-child:last-childalebo :nth-child(1):nth-last-child(1), ale s nižšou špecifickosťou.

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

Napríklad, ak vnoríme odseky do podobného tvaru tak, že ...


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 môžeme štylizovať jediné

nášho prvého dieťaťa . Nasledujúci a jeho potomok nebude nikdy štylizovaný, pretože nadradený kontajner obsahuje viac ako jedno dieťa (tj značky p).

p:only-child ( color:red; )

Mohli by sme tiež zmiešať ďalšie pseudotriedy, ako je tento príklad, ktorý vyberie prvý odsek v rámci nášho vnoreného divu a jediného potomka div.contain.


Hello World
some more children

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

:only-childnebude fungovať ako selektor, ak váš nadradený prvok obsahuje viac ako jedno dieťa s identickou značkou. Napríklad…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

To bude mať za následok, že žiadne divy nebudú dediť červenú farbu, pretože rodič obsahuje viac ako 1 dieťa (3 nepomenované divy).

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.