: enebarn - CSS-tricks

Anonim

Den :only-childpseudo-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-childeller :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-childfungerer 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