В :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 Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче е безупречна и новите псевдоселектори се използват широко в производствените среди. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill за IE, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.