:nth-last-of-type()

    0
    117

    Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.

    Псевдокласс похож на :nth-last-child, но он более конкретен и выбирает только элементы указанного ему типа.

    Вы можете представить работу этого псевдокласса так: браузер выбирает все элементы указанного типа внутри тэга и взаимодействует с выбранными элементами как с массивом элементов, где у каждого элемента есть свой индекс. Затем, используя введенный аргумент в :nth-last-of-type()он выбирает все элементы соответствующие аргументу начиная от последнего элемента к первому. К примеру,  p:nth-last-of-type(аргумент), выберет все параграфы внутри контейнера, а затем выберет все параграфы в соответствии с введенным аргументом.

    Вы можете ввести положительное число в качестве аргумента для :nth-last-of-type(), который выберет один элемент, индекс которого соответствует указанному в аргументе :nth-last-of-type(). К примеру, :nth-last-of-type(3) выберет третий элемент в списке, т.е. третий элемент снизу (начиная с последнего элемента).

    Также вы можете ввести один из двух предопределенных ключевых слов: even или odd. li::nth-last-of-type(even) выберет все элементы списка с положительным индексом (2, 4, 6, 8 и т.д.), а li:nth-last-of-type(odd) выберет все элементы списка с отрицательным индексом (1, 3, 5, 7 и т.д.).

    :nth-last-of-type() также позволяет вам выбрать один или более элементов используя формулу (выражение) – an+b – которая вводится в качестве аргумента. Синтаксис ввода следующий: :nth-last-of-type(an+b). Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2. Например, :nth-last-of-type(3n+1) выберет первый элемент с низу(3*0+1 = 1), четвертый элемент с низу (3*1+1 =4), седьмой элемент с низу (3*2+1 = 7) и так далее.

    :nth-last-of-type(an+b) делит все элементы содержащиеся в контейнере на “a” элементов и выбирает “b” элемент каждой группы. Таким образом, li:nth-last-of-type(3n+1) поделит элементы списка на 3 группы, вставит элементы с остатком в четвертую группу (если число элементов списка не делится на 3) и выберет первый элемент в каждой группе.

    Например, следующее изображение демонстрирует результат css выборки li:nth-last-of-type(3n+1) в списке элементов. Имеется 10 элементов в списке, мы имеем a = 3, десять элементов мы делим на 3. 10/3 = 3 + 1, таким образом, с учётом остатка мы имеем четыре группы. В каждой из групп, будет выбран первый элемент.

    Демонстрация работы nth-last-of-type

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

    Часто требуется подсчитать необходимую формулу для :nth-last-of-type() и в процессе подсчета появляются ошибки или путаница. Поэтому, чтобы упростить способ определения правильной формулы для :nth-last-of-type() имеются удобные инструменты, которые позволяют увидеть результат выборки nth-last-of-type(). Вот один из них:

    Легкий способ протестировать использование псевдоклассов nth-child и nth-of-type.

    Как и другие псевдоклассы :nth-last-of-type() можете работать совместно с другими селекторами, такими как: :hover или псевдоэлементом ::after. Например, следующее правило применит hover стили к элементам заданным формулой в :nth-last-of-type():

    В CSS имеются псевдоклассы похожие по функционалу с :nth-last-of-type() — селектор :nth-of-type(), этот селектор в отличии от :nth-last-of-type, который перебирает элементы снизу вверх, перебирает их начиная сверху вниз.

    Примеры

    Следующий пример выбирает четные строки в таблице и задает им цвет фона для создания эффекта зебры:

    Варианты использования nth-child():

    Живой пример

    Следующий пример демонстрирует как работает :nth-last-of-type(3n+1):

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

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

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

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

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