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