: nth-last-of-type - CSS-хитрости

:nth-last-of-typeСелектор позволяет выбрать один или несколько элементов , основываясь на их исходном порядке, в соответствии с формулой. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами. Он работает так же, как :nth-of-typeза исключением того, что выбирает элементы, начиная с нижней части исходного порядка, а не сверху.

Предположим, у нас есть неупорядоченный список, и мы хотим выделить предпоследний элемент (в данном конкретном примере «Четвертый элемент»):

First Item
Second Item
Third Item
Fourth Item
Fifth Item

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

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

Как видите, :nth-last-of-typeпринимает аргумент: это может быть одно целое число, ключевые слова «четный» или «нечетный» или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы - аналогично навигации по элементам в массиве в 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селекторов:

См. CSS-приемы Pen:: nth-last-of-type Криса Койера (@chriscoyier) на CodePen.

К счастью, не всегда приходится делать математические расчеты самостоятельно - существует несколько :nth-last-of-typeтестеров и генераторов:

• Тестер CSS-приемов
• Тестер Лиа Веру

Точки интереса

• :nth-last-of-typeвыполняет итерацию по элементам, начиная с нижней части исходного порядка. Единственная разница между ним и :nth-of-typeзаключается в том, что последний выполняет итерацию по элементам, начиная с нижней части исходного порядка.
• :nth-last-of-typeСелектор очень похож на , :nth-last-childно с одной критической разницей: это более конкретно. В нашем примере выше они дадут тот же результат, потому что мы перебираем только liэлементы, но если бы мы перебирали более сложную группу братьев и сестер, мы :nth-last-childпопытались бы сопоставить всех братьев и сестер, а не только братьев и сестер того же типа элемента. Это показывает, что :nth-last-of-type-it нацелена на определенный тип элемента в расположении по отношению к аналогичным братьям и сестрам, а не всем братьям и сестрам.

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

Хром	Сафари	Fire Fox	Опера	IE	Android	iOS
Работает	3.2+	Работает	9.5+	9+	Работает	Работает

:nth-last-of-typeбыл представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров его не поддерживают. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.