Больше контроля над выбором :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 из .highlight), имеет розовый контур.
• Элемент, соответствующий .highlight:nth-child(2), имеет зелёный контур.

See the Pen

Обратите внимание, что S — это список селекторов, то есть он допускает несколько селекторов, разделённых запятой. Например, :nth-child(4 of .highlight, .sale) выбирает четвёртый элемент, который является либо .highlight, либо .sale, из набора одноуровневых элементов.

В приведённом далее примере к элементу, соответствующему :nth-child(4 из .highlight, .sale), применяется оранжевый контур.

See the Pen

Новый взгляд на "Зебру"

Классический пример использования :nth-child() — создание таблицы с полосами зебры. Это визуальный приём, при котором в каждой строке таблицы чередуются цвета. Обычно к этому можно подойти следующим образом:

tr:nth-child(even) {
  background-color: lightgrey;
}

Хотя это прекрасно работает для статических таблиц, это становится проблематичным, когда вы переходите к динамической фильтрации содержимого таблицы. Например, если скрыть вторую строку, то в итоге будут видны первая и третья строки, каждая из которых имеет одинаковый цвет фона.

See the Pen

Чтобы это исправить, можно использовать :nth-child(An+B [of S]?), исключив скрытые строки из логики An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

See the Pen

Довольно мило, правда?