The :last-childpemilih membolehkan anda untuk mensasarkan elemen terakhir secara langsung di dalam unsur yang mengandungi. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "kelas pseudo struktural", yang bermaksud digunakan untuk menggayakan konten berdasarkan hubungannya dengan kandungan ibu bapa dan saudara kandung.
Andaikan kita mempunyai artikel dan ingin membuat perenggan terakhir lebih kecil, untuk bertindak sebagai kesimpulan kepada kandungan (seperti catatan editor):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Daripada menggunakan kelas (contohnya .last), kita dapat menggunakannya :last-childuntuk memilihnya:
p:last-child ( font-size: 0.75em; )Penggunaan :last-childsangat serupa dengan :last-of-typetetapi dengan satu perbezaan kritikal: kurang spesifik. :last-childhanya akan mencocokkan anak terakhir elemen induk, sementara last-of-typeakan mencocokkan kejadian terakhir elemen yang ditentukan, walaupun ia tidak mati terakhir dalam HTML. Dalam contoh di atas, hasilnya akan sama, hanya kerana anak terakhir articlejuga merupakan punsur terakhir . Ini menunjukkan kekuatan :last-child: ia dapat mengenal pasti elemen yang berkaitan dengan semua adik-beradiknya, bukan hanya saudara kandung dari jenis yang sama.
Contoh yang lebih lengkap di bawah menunjukkan penggunaan :last-childdan pemilih kelas pseudo yang berkaitan , :first-child.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sebarang | 3.2+ | Sebarang | 9.5+ | 9+ | Sebarang | Sebarang |
:last-childdiperkenalkan dalam CSS Selectors Module 3, yang bermaksud versi lama penyemak imbas tidak menyokongnya. Walau bagaimanapun, sokongan penyemak imbas moden sempurna, dan pemilih semu baru digunakan secara meluas dalam persekitaran pengeluaran. Sekiranya anda memerlukan sokongan penyemak imbas yang lebih lama, baik polyfill untuk IE, atau gunakan pemilih ini dengan cara yang tidak kritikal á la peningkatan progresif, yang disyorkan.