:nth-last-child()

    0
    124

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

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

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

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

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

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

    Демонстрация работы nth-last-child
    Когда вы вводите формулу в :nth-last-child(), браузер перебирает все элементы контейнера и затем выбирает элементы, которые соответствуют формуле. Перечень элементов, рассматривается как элементы массива, в котором каждый элемент имеет индекс.

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

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

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

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

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

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

    Примеры

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

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

    Живой пример

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

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

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

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

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

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