Den :first-childvælgeren giver dig mulighed for at målrette det første element umiddelbart inden et andet element. Det er defineret i CSS Selectors niveau 3-specifikation som en "strukturel pseudoklasse", hvilket betyder at den bruges til at style indhold baseret på dets forhold til overordnet og søskendeindhold.
Antag, at vi har en artikel og ønsker at gøre første afsnit større - som en "lede" eller et stykke indledende tekst:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
I stedet for at give det en klasse (f.eks. .first) Kan vi bruge :first-childtil at vælge det:
p:first-child ( font-size: 1.5em; )Brug :first-childligner meget, :first-of-typemen med en kritisk forskel: det er mindre specifikt. :first-childvil kun forsøge at matche det overordnede første barn til et overordnet element, mens det first-of-typevil matche den første forekomst af et bestemt element, selvom det ikke kommer absolut først i HTML. I eksemplet ovenfor ville resultatet være det samme, kun fordi det første barn af articleogså tilfældigvis er det første pelement. Dette afslører kraften ved :first-child: det kan identificere et element i forhold til alle dets søskende, ikke kun søskende af samme type.
Det mere komplette eksempel nedenfor viser brugen af :first-childog en relateret pseudoklassevælger :last-child.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | 3.2+ | Nogen | 9.5+ | 9+ | Nogen | Nogen |
:first-childblev introduceret i CSS Selectors Module 3, hvilket betyder, at gamle versioner af browsere ikke understøtter det. Imidlertid er moderne browsersupport upåklagelig, og de nye pseudovælgere bruges i vid udstrækning i produktionsmiljøer. Hvis du har brug for ældre browsersupport, skal du enten udfylde til IE eller bruge disse vælgere på ikke-kritiske måder á la progressiv forbedring, hvilket anbefales.