Cara Menggunakan Pseudo-class last-child

: last-child adalah pseudo-class yang memilih elemen target jika itu adalah anak terakhir dari beberapa elemen lain.

Yaitu,: last-child akan cocok dengan elemen hanya jika itu adalah anak terakhir dari orang tuanya.

Misalnya, anggap Kalian memiliki HTML berikut:

<article>
    <p>
        Lorem Ipsum...
        </p>
    <p>
        Another Lorem Ipsum...
    </p>
</article>

Berikut ini akan memilih dan menerapkan gaya ke paragraf kedua yang, dalam hal ini, adalah anak terakhir dari induknya.

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

Aturan di atas tidak akan menata paragraf dalam contoh berikut, karena ini bukan anak pertama dari induk .containernya.

<div class="container">
    <h1>Heading</h1>
    <p>
        Lorem Ipsum...
    </p>
    <ul> <!-- .. -->>
</div>

Jika Kalian ingin memilih dan menata paragraf terakhir di dalam sebuah wadah, apakah itu anak terakhir atau tidak, Kalian dapat menggunakan: pemilih tipe terakhir, yang, seperti namanya, akan memilih elemen terakhir dari jenisnya. , apakah itu adalah anak terakhir dari orang tuanya. Sebagai contoh, p: tipe terakhir akan memilih paragraf yang datang sebelum daftar tidak berurutan dalam contoh kode sumber di atas, tetapi tidak akan cocok dengan paragraf lain yang datang sebelum itu.

The: pseudo-class-last-child, 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. Lihat contoh dan bagian demo langsung di bawah untuk contoh.