The :first-of-typepemilih di CSS memungkinkan Anda untuk menargetkan kejadian pertama dari sebuah elemen dalam wadah. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "struktural pseudo-class", yang berarti digunakan untuk mengatur gaya konten berdasarkan hubungannya dengan konten induk dan saudara.
Misalkan kita memiliki artikel dengan judul dan beberapa paragraf:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Kami ingin membuat paragraf pertama lebih besar, sebagai semacam “lede” atau paragraf pengantar. Alih-alih memberinya kelas, kita dapat menggunakan :first-of-typeuntuk memilihnya:
p:first-of-type ( font-size: 1.25em; )Penggunaannya :first-of-typesangat mirip :nth-childtetapi dengan satu perbedaan penting: ini kurang spesifik. Dalam contoh di atas, jika kita telah menggunakan p:nth-child(1), tidak akan terjadi apa-apa karena paragraf tersebut bukan anak pertama dari induknya (the ). Ini mengungkapkan kekuatan :first-of-type: ia menargetkan jenis elemen tertentu dalam pengaturan tertentu yang berhubungan dengan saudara kandung yang serupa, tidak semua saudara kandung.
Contoh yang lebih lengkap di bawah ini menunjukkan penggunaan :first-of-typedan pemilih kelas-semu terkait :last-of-type,.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | 3.2+ | Bekerja | 9,5+ | 9+ | Bekerja | Bekerja |
:first-of-typediperkenalkan di CSS Selectors Module 3, yang berarti browser versi lama tidak mendukungnya. Namun, dukungan browser modern sangat sempurna, dan pseudo-selector baru digunakan secara luas di lingkungan produksi. Jika Anda memerlukan dukungan browser yang lebih lama, baik polyfill untuk IE, atau gunakan penyeleksi ini dengan cara yang tidak kritis seperti peningkatan progresif, yang direkomendasikan.