:nth-last-childСелектор позволяет выбрать один или несколько элементов , основываясь на их исходном порядке, в соответствии с формулой. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами. Он работает так же, как :nth-childза исключением того, что выбирает элементы, начиная с нижней части исходного порядка, а не сверху.
Предположим, у нас есть список с неизвестным количеством элементов, и мы хотим выделить предпоследний элемент (в данном конкретном примере «Четвертый элемент»):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Вместо того, чтобы делать что-то вроде добавления класса к элементу списка (например .highlight), мы можем использовать :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Как видите, :nth-last-childпринимает аргумент: это может быть одно целое число, ключевые слова «четный» или «нечетный» или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы - аналогично навигации по элементам в массиве в JavaScript. Ключевые слова «четный» и «нечетный» являются простыми (2, 4, 6 и т.д. или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an+b, где:
- «А» - целое число
- «N» - буквальная буква «n»
- «+» Является оператором и может быть «+» или «-».
- «B» является целым числом и требуется, если в формулу включен оператор.
Важно отметить, что эта формула представляет собой уравнение и проходит через каждый родственный элемент, определяя, какой из них будет выбран. Часть формулы «n», если она включена, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый второй элемент с помощью формулы 2n, которая работала, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (2 × 0, 2 × 1, 2 × 2, 2 × 3 и т. Д.). Если порядок элементов соответствует результату уравнения, он выбирается (2, 4, 6 и т. Д.). Для более подробного объяснения используемых математических вычислений, пожалуйста, прочтите эту статью.
Чтобы проиллюстрировать это дальше, вот несколько примеров допустимых :nth-last-of-typeселекторов:
К счастью, не всегда приходится делать математические расчеты самостоятельно - существует несколько :nth-last-childтестеров и генераторов:
- Тестер CSS-приемов
- Тестер Лиа Веру
Точки интереса
:nth-last-childвыполняет итерацию по элементам, начиная с нижней части исходного порядка. Единственная разница между ним и:nth-childзаключается в том, что последний выполняет итерацию по элементам, начиная с вершины исходного порядка.:nth-last-childСелектор очень похож на ,:nth-last-of-typeно с одной критической разницей: он менее специфичен. В нашем примере выше они дадут тот же результат, потому что мы перебираем толькоliэлементы, но если бы мы перебирали более сложную группу братьев и сестер, мы:nth-last-childпопытались бы сопоставить всех братьев и сестер, а не только братьев и сестер того же типа элемента. Это показывает, что:nth-last-child-it может выбрать любой родственный элемент в расположении, а не только элементы, указанные перед двоеточием.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | 3.2+ | Работает | 9.5+ | 9+ | Работает | Работает |
:nth-last-childбыл представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров его не поддерживают. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.