Den :only-child
pseudo-class selector ejendom i CSS repræsenterer et element, der har et overordnet element, og hvis overordnet element har ikke andre bestanddele børn. Dette ville være det samme som :first-child:last-child
eller :nth-child(1):nth-last-child(1)
, men med en lavere specificitet.
div p:only-child ( color: red; )
For eksempel, hvis vi nestes afsnit inden for et
lignende ...
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
Nu kan vi style det eneste
af vores første barn
. Den efterfølgende
og dens børn vil aldrig blive stylet, da den overordnede container rummer mere end et barn (dvs. p-tags).
p:only-child ( color:red; )
Vi kunne også blande yderligere pseudoklasser som dette eksempel, der vælger første afsnit inden for vores indlejrede div og eneste barn til div.contain
.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; )
:only-child
fungerer ikke som en vælger, hvis dit overordnede element indeholder mere end et barn med et identisk tag. For eksempel…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )
Dette resulterer i, at ingen divs arver farven rød, da forældrene indeholder mere end 1 barn (de 3 unavngivne divs).
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 3.5 | 9 | 12 | 3.2 |
Mobil / tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 2.1 | 3.2 |