Met de :first-of-typeselector in CSS kunt u zich richten op de eerste keer dat een element in zijn container voorkomt. Het wordt in de CSS Selectors Level 3-specificatie gedefinieerd als een "structurele pseudo-klasse", wat betekent dat het wordt gebruikt om inhoud op te maken op basis van de relatie met inhoud van ouders en broers en zussen.
Stel dat we een artikel hebben met een titel en meerdere alinea's:
Paragraph 1.
Paragraph 2.
Paragraph 3.
We willen de eerste alinea groter maken, als een soort "lede" of inleidende alinea. In plaats van het een klasse te geven, kunnen we het gebruiken :first-of-typeom het te selecteren:
p:first-of-type ( font-size: 1.25em; )Het gebruik :first-of-typelijkt erg op, :nth-childmaar met één cruciaal verschil: het is minder specifiek. Als we in het bovenstaande voorbeeld hadden gebruikt p:nth-child(1), zou er niets gebeuren omdat de alinea niet het eerste kind is van de ouder (de ). Dit toont de kracht van :first-of-type: het richt zich op een bepaald type element in een bepaalde opstelling met betrekking tot vergelijkbare broers en zussen, niet alle broers en zussen.
Het onderstaande meer volledig voorbeeld toont het gebruik van :first-of-typeen een verwante pseudo-class selector :last-of-type.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | 3.2+ | Werken | 9.5+ | 9+ | Werken | Werken |
:first-of-typewerd geïntroduceerd in CSS Selectors Module 3, wat betekent dat oude versies van browsers dit niet ondersteunen. De moderne browserondersteuning is echter onberispelijk en de nieuwe pseudo-selectors worden veel gebruikt in productieomgevingen. Als u oudere browserondersteuning nodig heeft, gebruik dan polyfill voor IE, of gebruik deze selectors op niet-kritieke manieren, zoals progressieve verbetering, wat wordt aanbevolen.