Den :first-of-typeväljaren i CSS kan du rikta den första förekomsten av ett element inom dess behållare. Det definieras i CSS Selectors nivå 3-specifikationen som en "strukturell pseudoklass", vilket betyder att den används för att utforma innehåll baserat på dess förhållande till föräldra- och syskoninnehåll.
Anta att vi har en artikel med en titel och flera stycken:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Vi vill göra första stycket större, som ett slags ”lede” eller inledande stycke. I stället för att ge den en klass kan vi använda den för :first-of-typeatt välja den:
p:first-of-type ( font-size: 1.25em; )Användning :first-of-typeär mycket lik :nth-childmen med en kritisk skillnad: det är mindre specifikt. I exemplet ovan, om vi hade använt p:nth-child(1), skulle inget hända eftersom stycket inte är det första barnet till sin förälder (den ). Detta avslöjar kraften i :first-of-type: det riktar sig mot en viss typ av element i ett visst arrangemang i förhållande till liknande syskon, inte alla syskon.
Ju mer komplett exemplet nedan visar användningen av :first-of-typeoch en relaterad pseudoklassväljare :last-of-type.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | 3.2+ | Arbetar | 9,5+ | 9+ | Arbetar | Arbetar |
:first-of-typeintroducerades i CSS Selectors Module 3, vilket innebär att gamla versioner av webbläsare inte stöder det. Modernt webbläsarsupport är dock oklanderligt och de nya pseudoväljarna används ofta i produktionsmiljöer. Om du behöver äldre webbläsarsupport, antingen polyfill för IE, eller använd dessa väljare på icke-kritiska sätt på en progressiv förbättring, vilket rekommenderas.