:first-childSelector vă permite să direcționați primul element imediat in interiorul altui element. Este definit în specificațiile CSS Selectors Level 3 ca o „pseudo-clasă structurală”, ceea ce înseamnă că este folosit pentru stilizarea conținutului pe baza relației sale cu conținutul părinte și frate.
Să presupunem că avem un articol și dorim să facem primul paragraf mai mare - cum ar fi un „lede” sau o bucată de text introductiv:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
În loc să îi oferim o clasă (de ex. .first), O putem :first-childselecta:
p:first-child ( font-size: 1.5em; )Utilizarea :first-childeste foarte asemănătoare, :first-of-typedar cu o diferență critică: este mai puțin specifică. :first-childva încerca doar să se potrivească cu primul copil imediat al unui element părinte, în timp ce se first-of-typeva potrivi cu prima apariție a unui element specificat, chiar dacă acesta nu este absolut primul în HTML. În exemplul de mai sus, rezultatul ar fi același, doar pentru că primul copil al copilului este, de articleasemenea, primul pelement. Aceasta dezvăluie puterea :first-child: poate identifica un element în raport cu toți frații săi, nu doar frații de același tip.
Exemplul mai complet de mai jos demonstrează utilizarea :first-childși un selector de pseudo-clasă asociat :last-child,.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Orice | 3.2+ | Orice | 9.5+ | 9+ | Orice | Orice |
:first-childa fost introdus în CSS Selectors Module 3, ceea ce înseamnă că versiunile vechi ale browserelor nu o acceptă. Cu toate acestea, suportul modern pentru browser este impecabil, iar noile pseudo-selectoare sunt utilizate pe scară largă în mediile de producție. Dacă aveți nevoie de suport pentru browser mai vechi, fie polyfill pentru IE, fie utilizați acești selectori în moduri non-critice pentru îmbunătățirea progresivă, ceea ce este recomandat.