:last-childСелектор дозволяє цільової останній елемент безпосередньо всередині його елемента. Це визначено в специфікації CSS Selectors Level 3 як "структурний псевдо-клас", тобто воно використовується для стилювання вмісту на основі його взаємозв'язку з батьківським вмістом та вмістом братів і сестер.
Припустимо, у нас є стаття і ми хочемо зменшити останній абзац, щоб зробити висновок до змісту (як примітка редактора):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Замість використання класу (наприклад .last), ми можемо використовувати його :last-childдля вибору:
p:last-child ( font-size: 0.75em; )Використання :last-childдуже схоже на, :last-of-typeале з однією критичною відмінністю: воно менш конкретне. :last-childнамагатиметься зіставити лише останню дочірню частину батьківського елемента, тоді як last-of-typeвідповідатиме останній зустрічаемості зазначеного елемента, навіть якщо вона не стане останньою в HTML. У наведеному вище прикладі результат буде однаковим, лише тому, що остання дочірня частина articleтакож є останнім pелементом. Це виявляє силу :last-child: він може ідентифікувати елемент стосовно всіх своїх братів і сестер, а не лише братів і сестер одного типу.
Більш повний приклад демонструє використання :last-childі пов'язаний селектор псевдо-класу, :first-child.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | 3,2+ | Будь-який | 9,5+ | 9+ | Будь-який | Будь-який |
:last-childбув введений в модулі CSS Selectors 3, що означає, що старі версії браузерів його не підтримують. Однак сучасна підтримка браузера бездоганна, і нові псевдоселектори широко використовуються у виробничих середовищах. Якщо вам потрібна старіша підтримка браузера, або polyfill для IE, або використовуйте ці селектори некритичними способами - прогресивне вдосконалення, яке рекомендується.