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

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

Bramus

Селекторы псевдоклассов :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) , … ребенка.

Но вы можете сделать более креативный выбор, если опустите параметр 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-й (3rd, 4th, 5th) .

Используя :nth-last-child() вы можете делать похожие выборки, но вместо того, чтобы начинать отсчет с начала, вы начинаете отсчет с конца.

Предварительная фильтрация выборок с использованием синтаксиса of S

Новым в CSS-селекторах уровня 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;
}

Очень мило, правда?

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