:last-of-type

    0
    155

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

    К примеру, следующие правила стилей сработают на последнем параграфе внутри .container

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

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

    не сработает на примере выше, т.к. параграф не является первым дочерним элементом. Вы можете прочитать про этот псевдокласс в статье про :last-child.

    Как и другие селекторы, :last-of-type может объединятся с другими псевдоселекторами, например, :hover. Смотрите пример ниже.

    Пример

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

    Следующее правило CSS выберет последний <article> в блоке .container

    Следующее правило CSS выберет последние вхождения параграфов в каждом родителе

    Следующие правила CSS выберут все последние ссылки внутри родительских элементов и выведут на экран url ссылки этих элементов рядом в скобках

    Демонстрация

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

    Псевдокласс :last-of-type поддерживается в Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, на Android и iOS.

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

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

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