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

Предварительно отфильтруйте набор дочерних элементов перед применением к нему логики An+B.

Брамус

Twitter GitHub Домашняя страница Мастодонта

Селекторы псевдоклассов :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) , … дочерний элемент .
• :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-го, 4-го, 5-го и т. д.) .
• :nth-child(-n+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 сделает свое дело.

Поддержка браузера

• 111
• 111
• 113
• 9

Примеры

Например, :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;
}

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

Фото Маркуса Списке на Unsplash