[Перевод] Больше контроля над селектором :nth-child() с помощью синтаксиса S

Эта статья — перевод оригинальной статьи «More control over: nth-child () selections with the of S syntax»

Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.

Селекторы псевдоклассов : nth-child () и : nth-last-child ()

С помощью селектора псевдокласса : nth-child () можно выбирать элементы в DOM по их индексу. Используя микросинтаксис An+B, вы получаете тонкий контроль над тем, какие элементы вы хотите выбрать.

  • :nth-child(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), ребенка.

Чтобы интерактивно увидеть, как логика An+B влияет на выделения, используйте тестер : nth-child.

Но можно сделать более творческий выбор, если опустить параметр A. Например:

  • :nth-child(n+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 () для применения стилей к группе элементов, когда они достигают определенного размера («Quantity Queries») или стилизовать родительский элемент на основе количества его дочерних элементов.

Предварительная фильтрация с помощью синтаксиса 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 сделает свое дело.

90a09c2ec7dd5083d3ef6da90a927836.png

Примеры

Например, :nth-child(2 of .highlight) выбирает второй подходящий элемент, имеющий класс .highlight. Другими словами: из всех дочерних элементов с классом .highlight выберите второй.

Это отличается от .highlight:nth-child(2), который выбирает элемент, имеющий класс .highlight, а также являющийся вторым дочерним элементом.

В демонстрационном примере ниже вы можете увидеть эту разницу:

  • Элемент, соответствующий :nth-child(2 of .highlight), имеет розовый контур.

  • Элемент, соответствующий .highlight:nth-child(2), имеет зеленый контур.

b976de45e1b79fda8ab20d27c7cda593.png

CodePen

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

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

a5b613be1ba03affbc2f9cea763e13a5.png

CodePen

Зебра, пересмотренный вариант

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

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

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

c4f9a2161d412d6264d97469620990d9.png

CodePen

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

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

17e3fe39422db4fc0f1949d5242c0a20.png

CodePen

Довольно круто, правда?

© Habrahabr.ru