: singurul copil - CSS-Tricks

Proprietatea :only-childde selectare a pseudo-clasei din CSS reprezintă un element care are un element părinte și al cărui element părinte nu are niciun alt element copii. Acest lucru ar fi același cu :first-child:last-childsau :nth-child(1):nth-last-child(1), dar cu o specificitate mai mică.

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

De exemplu, dacă cuibărim paragrafe într-un asemenea ...


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

Acum putem stiliza singurul

a primului nostru copil . Copiii ulteriori și ai săi nu vor fi niciodată stilați, deoarece containerul părinte conține mai mult de un copil (adică etichetele p).

p:only-child ( color:red; )

Am putea, de asemenea, să amestecăm pseudo-clase suplimentare, cum ar fi acest exemplu, care selectează primul paragraf din divul nostru imbricat și singurul-copil al div.contain.


Hello World
some more children

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

:only-childnu va funcționa ca selector dacă elementul părinte conține mai mult de un copil cu o etichetă identică. De exemplu…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Acest lucru va duce la nicio divizare care să moștenească culoarea roșie, deoarece părintele conține mai mult de 1 copil (cele 3 div-uri fără nume).

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.