:first-of-typeSelektor w CSS pozwala kierować pierwszego wystąpienia elementu jego kontenerze. Jest zdefiniowana w specyfikacji CSS Selectors Level 3 jako „strukturalna pseudoklasa”, co oznacza, że jest używana do stylizowania treści na podstawie jej relacji z treścią nadrzędną i siostrzaną.
Załóżmy, że mamy artykuł z tytułem i kilkoma akapitami:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Chcemy, aby pierwszy akapit był większy, jako coś w rodzaju „lede” lub akapitu wprowadzającego. Zamiast nadawać mu klasę, możemy :first-of-typego wybrać:
p:first-of-type ( font-size: 1.25em; )Stosowanie :first-of-typejest bardzo podobne do, :nth-childale ma jedną zasadniczą różnicę: jest mniej szczegółowe. W powyższym przykładzie, gdybyśmy użyli p:nth-child(1), nic by się nie stało, ponieważ akapit nie jest pierwszym dzieckiem swojego rodzica (the ). To ujawnia siłę :first-of-type: celuje w określony typ elementu w konkretnym układzie w odniesieniu do podobnego rodzeństwa, a nie do całego rodzeństwa.
Pełniejsza Poniższy przykład pokazuje zastosowanie :first-of-typeoraz powiązane selektor pseudo dla klasy :last-of-type.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | 3.2+ | Pracuje | 9.5+ | 9+ | Pracuje | Pracuje |
:first-of-typezostał wprowadzony w module 3 selektorów CSS, co oznacza, że starsze wersje przeglądarek go nie obsługują. Jednak obsługa nowoczesnych przeglądarek jest nienaganna, a nowe pseudoselektory są szeroko stosowane w środowiskach produkcyjnych. Jeśli potrzebujesz obsługi starszych przeglądarek, użyj wypełnienia polyfill dla IE lub użyj tych selektorów w sposób niekrytyczny - zalecane jest stopniowe ulepszanie.