:first-of-typeVolič CSS vám umožní zaměřit se na první výskyt prvku v rámci svého kontejneru. 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 s názvem a několika odstavci:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Chceme zvětšit první odstavec jako jakýsi „lede“ nebo úvodní odstavec. Místo toho, abychom mu dali třídu, jej můžeme použít :first-of-typek výběru:
p:first-of-type ( font-size: 1.25em; )Použití :first-of-typeje velmi podobné, :nth-childale s jedním zásadním rozdílem: je méně konkrétní. Ve výše uvedeném příkladu, pokud bychom použili p:nth-child(1), by se nic nestalo, protože odstavec není prvním dítětem jeho rodiče (the ). To odhaluje sílu :first-of-type: zaměřuje se na určitý typ prvku v určitém uspořádání ve vztahu k podobným sourozencům, nikoli na všechny sourozence.
Níže uvedený úplnější příklad ukazuje použití :first-of-typea související volič pseudo-třídy, :last-of-type.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Funguje | 3,2+ | Funguje | 9,5+ | 9+ | Funguje | Funguje |
:first-of-typebyl 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.