:last-child

    0
    1125

    :last-child псевдокласс который выбирает и определяет стили для последнего элемента своего родителя.

    Только последний дочерний элемент родителя является критерием выбора для данного псевдокласса. Допустим, у Вас имеется следующий HTML код:

    Следующее правило CSS выберет и применит стили для второго параграфа, т.к. он является последним дочерним элементом родителя (<article>):

    Приведенный выше код не сработает в нижеприведенном случае, т.к. параграф не является последним элементом родителя .wrapper :

    Тонкости & Особенности

    Если вы хотите выбрать и стилизовать последний параграф, который не является последним элементом родителя, можете воспользоваться псевдоклассом :last-of-type, который как исходит из названия выбирает последний элемент по типу. В случае с вышеприведенным примером, данный псевдокласс выберет последний параграф, который находится перед заголовком <h3>.

    :last-child как и другие псевдоклассы может работать совместно с другими селекторами, например :hover, ::before или ::after. Смотрите примеры ниже.

    Примеры

    Предположим, у Вас имеется следующий HTML код:

    Следующее правило стилей сработает на span внутри второго параграфа, т.к. он является последним элементом своего родителя (<p>):

    Следующее правило не сработает ни на одном из параграфов, т.к. ни один из них не является последним элементом своего родителя:

    Следующий код обернет span в круглые скобки с помощью ::after и ::before:

    Вы можете увидеть живой пример ниже.

    Живой пример

    Поддержка браузерами

    Псевдокласс :last-child поддерживается в Chrome, Firefox, IE 9.5+, Safari, Android и iOS.

    ПОДЕЛИТЬСЯ
    Предыдущая статья:hover
    Следующая статья:last-of-type
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя