:first-childSelektor omogućuje ciljanje prvi element odmah u drugom elementu. U specifikaciji CSS Selectors Level 3 definiran je kao „strukturna pseudo-klasa“, što znači da se koristi za oblikovanje sadržaja na temelju odnosa s roditeljskim sadržajem i sadržajem.
Pretpostavimo da imamo članak i želimo povećati prvi odlomak - poput "lede" ili uvodnog teksta:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Umjesto da mu damo klasu (npr. .first), Možemo je koristiti :first-childza odabir:
p:first-child ( font-size: 1.5em; )Korištenje :first-childje vrlo slično, :first-of-typeali s jednom kritičnom razlikom: manje je specifično. :first-childpokušat će podudarati samo neposredno podređeno mjesto nadređenog elementa, dok first-of-typeće odgovarati prvom pojavljivanju određenog elementa, čak i ako u HTML-u ne dođe na prvo mjesto. U gornjem primjeru ishod bi bio isti, samo zato što je prvo dijete djeteta articletakođer prvi pelement. To otkriva snagu :first-child: može prepoznati element u odnosu na svu svoju braću i sestre, a ne samo na braću i sestre iste vrste.
Što više kompletan primjer u nastavku pokazuje uporabu :first-childi srodne selektor pseudo-klase, :last-child.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Bilo koji | 3,2+ | Bilo koji | 9,5+ | 9+ | Bilo koji | Bilo koji |
:first-childuveden je u CSS Selectors Module 3, što znači da ga stare verzije preglednika ne podržavaju. Međutim, moderna podrška za preglednike je besprijekorna, a novi pseudo-selektori široko se koriste u proizvodnim okruženjima. Ako vam je potrebna starija podrška za preglednik, ili polifil za IE, ili ove selektore koristite na nekritične načine, progresivno poboljšanje, što se preporučuje.