Den :first-of-typevælgeren i CSS giver dig mulighed for at målrette den første forekomst af et element i dets beholder. 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 med en titel og flere afsnit:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Vi ønsker at gøre første afsnit større som en slags "lede" eller indledende afsnit. I stedet for at give det en klasse kan vi bruge :first-of-typetil at vælge det:
p:first-of-type ( font-size: 1.25em; )Brug :first-of-typeligner meget, :nth-childmen med en kritisk forskel: det er mindre specifikt. I eksemplet ovenfor, hvis vi havde brugt p:nth-child(1), ville der ikke ske noget, fordi afsnittet ikke er det første barn til sin forælder (den ). Dette afslører styrken ved :first-of-type: det målretter mod en bestemt type element i et bestemt arrangement i forhold til lignende søskende, ikke alle søskende.
Det mere komplette eksempel nedenfor viser brugen af :first-of-typeog en relateret pseudoklassevælger :last-of-type.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | 3.2+ | Arbejder | 9.5+ | 9+ | Arbejder | Arbejder |
:first-of-typeblev 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.