: tik-vaikas - CSS-gudrybės

Turinys

:only-childPseudo klasės selektorių nuosavybė CSS atstovauja elementas, kuris turi patronuojančią elementas ir kurios patronuojanti elementas neturi kitų elementų vaikus. Tai būtų tas pats kaip :first-child:last-childarba :nth-child(1):nth-last-child(1), bet su mažesniu specifiškumu.

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

Pvz., Jei pastraipas įdėsime į panašius elementus ...


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

Dabar galime stilizuoti vienintelį

mūsų pirmojo vaiko . Vėlesni ir jo vaikai niekada nebus stiliaus, nes pagrindiniame sudėtiniame rodinyje yra daugiau nei vienas vaikas (ty „p“ žymos).

p:only-child ( color:red; )

Mes taip pat galėtume derinti papildomas pseudoklases, pavyzdžiui, šį pavyzdį, kuris parenka pirmąją pastraipą mūsų įdėtame div ir vienintelį vaiką div.contain.


Hello World
some more children

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

:only-childneveiks kaip parinkiklis, jei pagrindiniame elemente yra daugiau nei vienas vaikas su identiška žyma. Pavyzdžiui…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Dėl to nė vienas divas nepaveldės raudonos spalvos, nes tėvai turi daugiau nei 1 vaiką (3 neįvardyti divai).

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.