:first-childSelektor vam omogoča, da takoj usmeriti prvi element znotraj drugega elementa. V specifikaciji CSS Selectors Level 3 je opredeljen kot "strukturni psevdorazred", kar pomeni, da se uporablja za oblikovanje vsebine glede na njen odnos z nadrejeno in sorojensko vsebino.
Recimo, da imamo članek in želimo prvi odstavek povečati - na primer »lede« ali uvodno besedilo:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Namesto da mu damo razred (npr. .first), Ga lahko uporabimo :first-childza izbiro:
p:first-child ( font-size: 1.5em; )Uporaba :first-childje zelo podobna, :first-of-typevendar z eno kritično razliko: je manj specifična. :first-childse bo poskušal ujemati le s takojšnjim prvim podrejenim elementom nadrejenega elementa, medtem ko se first-of-typebo ujemal s prvim pojavljanjem določenega elementa, tudi če v HTML-ju ne pride popolnoma na prvo mesto. V zgornjem primeru bi bil rezultat enak, le ker je prvi podrejeni element articletudi prvi pelement. To razkriva moč :first-child: lahko prepozna element glede na vse svoje brate in sestre, ne le na brate in sestre iste vrste.
Spodnji bolj popoln primer prikazuje uporabo :first-childin s tem povezano izbiro psevdo-razreda, :last-child.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Kaj | 3,2+ | Kaj | 9,5+ | 9+ | Kaj | Kaj |
:first-childje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnike brezhibna, novi psevdo-izbirniki pa se pogosto uporabljajo v produkcijskih okoljih. Če potrebujete podporo za starejši brskalnik, bodisi polyfill za IE bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.