Met de :first-childselector kunt u het eerste element direct binnen een ander element targeten. 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 en de eerste alinea groter willen maken, zoals een "lede" of een inleidende tekst:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
In plaats van het een klasse te geven (bijv. .first), Kunnen we het gebruiken :first-childom het te selecteren:
p:first-child ( font-size: 1.5em; )Het gebruik :first-childlijkt erg op, :first-of-typemaar met één cruciaal verschil: het is minder specifiek. :first-childzal alleen proberen om het onmiddellijke eerste kind van een bovenliggend element first-of-typete matchen , terwijl het zal matchen met het eerste exemplaar van een gespecificeerd element, zelfs als het niet absoluut als eerste komt in de HTML. In het bovenstaande voorbeeld zou de uitkomst hetzelfde zijn, alleen omdat het eerste kind van de articleook het eerste pelement is. Dit onthult de kracht van :first-child: het kan een element identificeren met betrekking tot al zijn broers en zussen, niet alleen broers en zussen van hetzelfde type.
Het onderstaande meer volledig voorbeeld toont het gebruik van :first-childen een verwante pseudo-class selector :last-child.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3.2+ | Ieder | 9.5+ | 9+ | Ieder | Ieder |
:first-childwerd 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.