:last-childSelector vă permite să direcționați ultimul element direct în interiorul elementului său , conținând. 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ă micșorăm ultimul paragraf, pentru a acționa ca o concluzie a conținutului (cum ar fi nota unui editor):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
În loc să folosim o clasă (de exemplu .last), o putem :last-childselecta:
p:last-child ( font-size: 0.75em; )Utilizarea :last-childeste foarte asemănătoare, :last-of-typedar cu o diferență critică: este mai puțin specifică. :last-childva încerca să se potrivească doar cu ultimul copil al unui element părinte, în timp ce se last-of-typeva potrivi cu ultima apariție a unui element specificat, chiar dacă acesta nu apare ultimul în HTML. În exemplul de mai sus, rezultatul ar fi același, doar pentru că și ultimul copil al lui articlese întâmplă să fie ultimul pelement. Aceasta dezvăluie puterea :last-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 :last-childși un selector de pseudo-clasă asociat :first-child,.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Orice | 3.2+ | Orice | 9.5+ | 9+ | Orice | Orice |
:last-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.