Med :first-childväljaren kan du rikta in det första elementet direkt inuti ett annat element. 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 och vill göra första stycket större - som en "lede", eller en introduktionstext:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
I stället för att ge den en klass (t.ex. .first) kan vi använda den för :first-childatt välja den:
p:first-child ( font-size: 1.5em; )Användning :first-childär mycket lik :first-of-typemen med en kritisk skillnad: det är mindre specifikt. :first-childförsöker bara matcha det överordnade första barnet till ett överordnat element, medan det first-of-typematchar den första förekomsten av ett angivet element, även om det inte kommer helt först i HTML. I exemplet ovan skulle resultatet vara detsamma, bara för att det första barnet till articleråkar också vara det första pelementet. Detta avslöjar kraften hos :first-child: det kan identifiera ett element i förhållande till alla sina syskon, inte bara syskon av samma typ.
Ju mer komplett exemplet nedan visar användningen av :first-childoch en relaterad pseudoklassväljare :last-child.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Några | 3.2+ | Några | 9,5+ | 9+ | Några | Några |
:first-childintroducerades 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.