Den :first-of-typevelgeren i CSS kan du målrette den første forekomsten av et element i sin container. 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 med tittel og flere avsnitt:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Vi ønsker å gjøre første avsnitt større, som et slags ”lede” eller innledende avsnitt. I stedet for å gi den en klasse, kan vi bruke den :first-of-typetil å velge den:
p:first-of-type ( font-size: 1.25em; )Bruk :first-of-typeer veldig lik :nth-childmen med en kritisk forskjell: den er mindre spesifikk. I eksemplet ovenfor, hvis vi hadde brukt p:nth-child(1), ville ingenting skje fordi avsnittet ikke er det første barnet til foreldrene (den ). Dette avslører kraften til :first-of-type: den retter seg mot en bestemt type element i et bestemt arrangement i forhold til lignende søsken, ikke alle søsken.
Jo mer komplett eksempel nedenfor demonstrerer bruk av :first-of-typeog en beslektet pseudo-klasse selector, :last-of-type.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | 3.2+ | Virker | 9.5+ | 9+ | Virker | Virker |
:first-of-typeble 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.