: jedino dijete - CSS-trikovi

:only-childSelektor pseudo-klase imovine u CSS predstavlja element koji ima roditelj element i čiji nadređeni element nema druge djece elemenata. To bi bilo isto kao :first-child:last-childili :nth-child(1):nth-last-child(1), ali s nižom specifičnošću.

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

Na primjer, ako odlomke ugnijezdimo unutar sličnog…


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

Sada možemo oblikovati jedino

našeg prvog djeteta . Daljnja i njegova djeca nikada neće biti stilizirana jer roditeljski spremnik sadrži više od jednog djeteta (tj. P oznake).

p:only-child ( color:red; )

Također bismo mogli kombinirati dodatne pseudo-klase poput ovog primjera koji odabire prvi odlomak unutar našeg ugniježđenog div-a i jedino dijete podređenog div.contain.


Hello World
some more children

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

:only-childneće raditi kao selektor ako vaš roditeljski element sadrži više od jednog djeteta s identičnom oznakom. Na primjer…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

To neće rezultirati time da div-ovi nasljeđuju crvenu boju jer roditelj sadrži više od 1 podređenog (3 neimenovana div-a).

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.