The :first-of-typepemilih dalam CSS membolehkan anda untuk mensasarkan kejadian pertama elemen dalam bekasnya. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "kelas pseudo struktural", yang bermaksud digunakan untuk menggayakan konten berdasarkan hubungannya dengan kandungan ibu bapa dan saudara kandung.
Andaikan kita mempunyai artikel dengan judul dan beberapa perenggan:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Kami ingin membuat perenggan pertama lebih besar, sebagai semacam "lede" atau perenggan pendahuluan. Daripada memberikan kelas, kita boleh menggunakannya :first-of-typeuntuk memilihnya:
p:first-of-type ( font-size: 1.25em; )Penggunaan :first-of-typesangat serupa dengan :nth-childtetapi dengan satu perbezaan kritikal: kurang spesifik. Dalam contoh di atas, jika kita telah menggunakannya p:nth-child(1), tidak ada yang akan berlaku kerana perenggan itu bukan anak pertama dari induknya (yang ). Ini menunjukkan kekuatan :first-of-type: ia mensasarkan jenis elemen tertentu dalam susunan tertentu yang berkaitan dengan saudara kandung yang serupa, bukan semua adik beradik.
Contoh yang lebih lengkap di bawah menunjukkan penggunaan :first-of-typedan pemilih kelas pseudo yang berkaitan , :last-of-type.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | 3.2+ | Berfungsi | 9.5+ | 9+ | Berfungsi | Berfungsi |
:first-of-typediperkenalkan dalam CSS Selectors Module 3, yang bermaksud versi lama penyemak imbas tidak menyokongnya. Walau bagaimanapun, sokongan penyemak imbas moden sempurna, dan pemilih semu baru digunakan secara meluas dalam persekitaran pengeluaran. Sekiranya anda memerlukan sokongan penyemak imbas yang lebih lama, baik polyfill untuk IE, atau gunakan pemilih ini dengan cara yang tidak kritikal á la peningkatan progresif, yang disyorkan.