Den :first-childvelgeren kan du målrette det første elementet umiddelbart inni et annet element. Det er definert i CSS Selectors Level 3-spesifikasjonen som en "strukturell pseudoklasse", noe som betyr at den brukes til å style innhold basert på forholdet til foreldre- og søskeninnhold.
Anta at vi har en artikkel og ønsker å gjøre første avsnitt større - som en "lede", eller en innledningstekst:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
I stedet for å gi den en klasse (f.eks. .first), Kan vi bruke den :first-childtil å velge den:
p:first-child ( font-size: 1.5em; )Bruk :first-childer veldig lik :first-of-typemen med en kritisk forskjell: den er mindre spesifikk. :first-childvil bare prøve å matche det første barnet til et overordnet element, mens det first-of-typevil matche den første forekomsten av et spesifisert element, selv om det ikke kommer helt først i HTML-koden. I eksemplet ovenfor vil utfallet være det samme, bare fordi det første barnet til det articletilfeldigvis også er det første pelementet. Dette avslører kraften til :first-child: det kan identifisere et element i forhold til alle søsknene, ikke bare søsken av samme type.
Jo mer komplett eksempel nedenfor demonstrerer bruk av :first-childog en beslektet pseudo-klasse selector, :last-child.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | 3.2+ | Noen | 9.5+ | 9+ | Noen | Noen |
:first-childble introdusert i CSS Selectors Module 3, som betyr at gamle versjoner av nettlesere ikke støtter det. Imidlertid er moderne nettleserstøtte upåklagelig, og de nye pseudovelgerne er mye brukt i produksjonsmiljøer. Hvis du trenger eldre nettleserstøtte, kan du enten fylle ut for IE, eller bruke disse velgerne på ikke-kritiske måter, på en progressiv forbedring, noe som anbefales.