The :last-childpemilih memungkinkan Anda untuk menargetkan elemen terakhir langsung di dalam elemen yang mengandung. 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 dan ingin memperkecil paragraf terakhir, sebagai kesimpulan dari konten (seperti catatan editor):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Alih-alih menggunakan kelas (misalnya .last), kita dapat menggunakan :last-childuntuk memilihnya:
p:last-child ( font-size: 0.75em; )Penggunaannya :last-childsangat mirip :last-of-typetetapi dengan satu perbedaan penting: ini kurang spesifik. :last-childhanya akan mencoba mencocokkan anak terakhir dari elemen induk, sementara last-of-typeakan mencocokkan kemunculan terakhir dari elemen yang ditentukan, meskipun tidak muncul terakhir dalam HTML. Dalam contoh di atas, hasilnya akan sama, hanya karena anak terakhir dari articlejuga merupakan pelemen terakhir . Ini mengungkapkan kekuatan :last-child: ia dapat mengidentifikasi elemen yang terkait dengan semua saudara kandungnya, bukan hanya saudara kandung dari tipe yang sama.
Contoh yang lebih lengkap di bawah ini menunjukkan penggunaan :last-childdan pemilih kelas-semu terkait :first-child,.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | 3.2+ | Apa saja | 9,5+ | 9+ | Apa saja | Apa saja |
:last-childdiperkenalkan 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.