:nth-childСелектор позволяет выбрать один или несколько элементов , основываясь на их исходном порядке, в соответствии с формулой.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами.
Предположим, мы создаем сетку CSS и хотим удалить поля на каждом четвертом модуле сетки. Вот этот HTML:
One Two Three Four Five Вместо того, чтобы добавлять класс к каждому четвертому элементу (например .last), мы можем использовать :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childСелектор принимает аргумент: это может быть одним целым, ключевые слова even, oddили формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы - аналогично навигации по элементам в массиве JavaScript. Ключевые слова «четный» и «нечетный» являются простыми (2, 4, 6 и т. Д. Или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an+b, где:
- «А» - целое число
- «N» - буквальная буква «n»
- «+» Является оператором и может быть «+» или «-».
- «B» является целым числом и требуется, если в формулу включен оператор.
Важно отметить, что эта формула представляет собой уравнение и проходит через каждый родственный элемент, определяя, какой из них будет выбран. Часть формулы «n», если она включена, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый четвертый элемент с помощью формулы 4n, которая работала, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (4 × 0, 4 × 1, 4 × 2, 4 × 3 и т. Д.). Если порядок элементов соответствует результату уравнения, он выбирается (4, 8, 12 и т. Д.). Для более подробного объяснения используемых математических вычислений, пожалуйста, прочтите эту статью.
Чтобы проиллюстрировать это дальше, вот несколько примеров допустимых :nth-childселекторов:
К счастью, не всегда приходится делать математические расчеты самостоятельно - существует несколько :nth-childтестеров и генераторов:
- Тестер CSS-приемов
- Тестер Лиа Веру
: nth-child (an + b of)
Существует малоизвестный фильтр, который можно добавить в :nth-childсоответствии со спецификацией CSS Selectors: возможность выбора :nth-childиз подмножества элементов с использованием of формата. Предположим, у вас есть список смешанного содержания: у некоторых есть класс .video, у некоторых - класс .picture, и вы хотите выбрать первые 3 изображения. Вы можете сделать это с помощью фильтра «из» следующим образом:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Обратите внимание, что это отличается от добавления селектора непосредственно к :nth-childселектору:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Это может немного запутать, поэтому пример может помочь проиллюстрировать разницу:
Браузер поддерживает фильтр «of» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые вопросы, связанные с :nth-child(an+b of s):
- Firefox: поддержка nth-child (An + B of sel)
- Chrome: реализация: nth-child (an + b of S)
Точки интереса
:nth-childперебирает элементы, начиная с вершины исходного порядка. Единственная разница между ним и:nth-last-childзаключается в том, что последний выполняет итерацию по элементам, начиная с нижней части исходного порядка.- Синтаксис выбора первого
nчисла элементов немного противоречит интуиции. Вы начинаете с-nплюс положительное количество элементов, которые хотите выбрать. Например,li:nth-child(-n+3)выберем первые 3liэлемента. :nth-childСелектор очень похож на ,:nth-of-typeно с одной критической разницей: он менее специфичен. В нашем примере выше они дадут тот же результат, потому что мы перебираем только.moduleэлементы, но если бы мы перебирали более сложную группу братьев и сестер, мы:nth-childпопытались бы сопоставить всех братьев и сестер, а не только братьев и сестер того же типа элемента. Это показывает, что:nth-child-it может выбрать любой родственный элемент в расположении, а не только элементы, указанные перед двоеточием.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любой | 3.2+ | Любой | 9.5+ | 9+ | Любой | Любой |
:nth-childбыл представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров его не поддерживают. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.