:first-childVolič vám umožní zaměřit se na první prvek bezprostředně uvnitř jiného prvku. Ve specifikaci CSS Selectors Level 3 je definována jako „strukturní pseudotřída“, což znamená, že se používá ke stylování obsahu na základě jeho vztahu s nadřazeným a sourozeneckým obsahem.
Předpokládejme, že máme článek a chceme zvětšit první odstavec - například „lede“ nebo úvodní text:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Místo toho, abychom mu dali třídu (např. .first), Můžeme ji :first-childvybrat:
p:first-child ( font-size: 1.5em; )Použití :first-childje velmi podobné, :first-of-typeale s jedním zásadním rozdílem: je méně konkrétní. :first-childse pokusí porovnat pouze první podřízený prvek nadřazeného prvku, zatímco first-of-typebude odpovídat prvnímu výskytu určeného prvku, i když v HTML nebude absolutně první. Ve výše uvedeném příkladu by byl výsledek stejný, jen proto, že první podřízený prvek se articletaké stane prvním pprvkem. To odhaluje sílu :first-child: může identifikovat prvek ve vztahu ke všem jeho sourozencům, nejen k sourozencům stejného typu.
Níže uvedený úplnější příklad ukazuje použití :first-childa související volič pseudo-třídy, :last-child.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Žádný | 3,2+ | Žádný | 9,5+ | 9+ | Žádný | Žádný |
:first-childbyl představen v modulu CSS Selectors Module 3, což znamená, že staré verze prohlížečů jej nepodporují. Podpora moderních prohlížečů je však dokonalá a nové pseudo-selektory jsou široce používány v produkčním prostředí. Pokud požadujete podporu starších prohlížečů, buď polyfill pro IE, nebo použijte tyto selektory nekritickými způsoby á la progresivní vylepšení, které se doporučuje.