: csak-gyermek - CSS-trükkök

A :only-childCSS ál-osztály választó tulajdonság egy olyan elemet képvisel, amelynek van szülő eleme, és amelynek szülő elemének nincs más gyermeke. Ez ugyanaz lenne, mint a, :first-child:last-childvagy :nth-child(1):nth-last-child(1), de alacsonyabb specifikussággal.

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

Például, ha bekezdéseket fészkelünk egy hasonlóba, így…


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

Most már az egyetlenet tudjuk stílusozni

első gyermekünké . A későbbi és annak gyermekei soha nem lesznek stilizáltak, mivel a szülőtároló egynél több gyermeket (azaz a p tageket) tartalmaz.

p:only-child ( color:red; )

Keverhetnénk további álosztályokat is, például ezt a példát, amely kiválasztja a beágyazott div-en belül az első bekezdést és az egyetlen gyermekét div.contain.


Hello World
some more children

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

:only-childnem fog kiválasztóként működni, ha a szülő elem több, azonos címkével rendelkező gyermeket tartalmaz. Például…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Ennek eredményeként egyetlen div sem örökli a vörös színt, mivel a szülő 1-nél több gyermeket tartalmaz (a 3 meg nem nevezett div-t).

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.