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

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

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

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

p:last-of-type {
    font-style: italic;
}

Trivia & Catatan

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

p:last-child {
    font-style: italic;
}

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

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