Больше контроля над выбором :nth-child() с синтаксисом of S
Селекторы псевдоклассов :nth-child() и :nth-last-child()
С помощью селектора псевдокласса :nth-child() можно выбирать элементы в DOM по их индексу. Используя микросинтаксис An+B, вы получаете точный контроль над тем, какие элементы вы хотите выбрать.
:nth-child(2): Выберет 2 дочерний элемент.:nth-child(2n): Выберет все чётные дочерние элементы (2, 4, 6, 8 и так далее).:nth-child(2n+1): Выберет все нечётные дочерние элементы (1, 3, 5, 7 и так далее).:nth-child(5n+1): Выберет 1 (=(5×0)+1), 6 (=(5×1)+1), 11 (=(5×2)+1), … дочерние элементы.:nth-child(5n+2): Выберет 2 (=(5×0)+2), 7 (=(5×1)+2), 12 (=(5×2)+2), … дочерние элементы.
Чтобы увидеть в интерактивном режиме, как логика An+B влияет на выбор, воспользуйтесь :nth-child тестером.
Но вы можете сделать более творческий выбор, если опустите параметр A. Например:
- :nth-child(n+3)`: Выберет все дочерние элементы начиная с 3 (3, 4, 5 и так далее).
- :nth-child(-n+5)`: Выберет все дочерние элемент до 5 (1, 2, 3, 4, 5).
Объедините несколько вариантов выбора :nth-child(), и вы сможете выбирать диапазоны элементов:
:nth-child(n+3):nth-child(-n+5): Выберет все дочерние элементы с 3 по 5 (3, 4, 5).
Используя :nth-last-child(), вы можете делать аналогичные выборки, но вместо того, чтобы начинать с первого элемента, вы начнёте с последнего.
Если вы хотите перейти на следующий уровень, вы можете использовать :nth-child() для применения стилей к группе элементов, когда они достигают определённого размера (Количественные Запросы
), или стилизовать родительский элемент на основе количества его дочерних элементов.
Предварительная фильтрация выбора с синтаксисом of S
Новым в CSS Selectors Level 4 является возможность опционально передавать список селекторов в :nth-child() и :nth-last-child().
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)Когда указано of S, логика An+B применяется только к элементам, которые соответствуют заданному списку селекторов S. По сути это означает, что вы можете предварительно отфильтровать дочерние элементы до того, как An+B сделает своё дело.
Примеры
Например, :nth-child(2 of .highlight) выбирает второй соответствующий элемент, имеющий класс .highlight. Другими словами: из всех дочерних элементов с классом .highlight выбирается второй.
Это отличается от .highlight:nth-child(2), который выбирает элемент имеющий класс .highlight и также является вторым дочерним элементом.
На демо ниже вы можете увидеть разницу:
- Элемент, который соответствует
:nth-child(2 of .highlight), имеет розовый контур. - Элемент, соответствующий
.highlight:nth-child(2), имеет зелёный контур.
Обратите внимание, что S — это список селекторов, что означает, что он принимает несколько селекторов, разделённых запятой. Например, :nth-child(4 of .highlight, .sale) выбирает четвёртый элемент, который является либо .highlight, либо .sale из набора одноуровневых элементов.
В приведённой ниже демонстрации элемент, который соответствует :nth-child(4 of .highlight, .sale), имеет оранжевый контур.
Новый взгляд на зебру
Классический пример использования :nth-child() — создание таблицы с полосами зебры. Это визуальная техника, при которой каждая строка таблицы чередует цвета. Обычно к этому подходили следующим образом:
tr:nth-child(even) {
background-color: lightgrey;
}Это прекрасно работает для статических таблиц, но становится проблематичным, когда вы начинаете динамически формировать содержимое таблицы. Когда, например, вторая строка скрыта, у вас окажутся видимыми первая и треть строки, каждая с одним и тем же цветом фона.
Чтобы исправить это, мы можем использовать :nth-child(An+B [of S]?), исключив скрытые строки из логики An+B:
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}Довольно мило, правда?