Cara Menggunakan Pseudo-class first-of-type pada CSS

: first-of-type adalah pemilih pseudo-class CSS yang memilih elemen yang merupakan elemen pertama (saudara kandung) dari jenisnya dalam daftar anak-anak dari orang tuanya.

Dengan kata lain,: first-of-type cocok dengan kemunculan pertama elemen di dalam induknya. Misalnya, aturan berikut akan memilih dan menata paragraf pertama dalam .container.

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>
    <!-- .... -->
</article>

p:first-of-type {
    font-size: 12px;
}

Trivia & Catatan

: first-of-type mirip dengan: pemilih anak pertama, kecuali bahwa itu lebih spesifik daripada yang terakhir—: tipe pertama akan memilih paragraf pertama dalam contoh di atas apakah itu adalah anak pertama dari artikel; : anak pertama, di sisi lain, digunakan untuk memilih elemen hanya jika itu adalah anak pertama dari induknya. Jadi ini:

p:first-child {
    font-size: 15px;
}

tidak akan menata paragraf pertama di atas karena ini bukan anak pertama dari induknya. Anda dapat membaca lebih lanjut tentang: pemilih anak pertama dalam entri.

The: pseudo-class tipe pertama, seperti pseudo-class lainnya, dapat dirantai dengan penyeleksi lain seperti: hover, misalnya, untuk menyediakan gaya hover untuk elemen yang dipilih. Itu juga bisa dirantai dengan pseudo-elements :: before dan :: after.