⁣CSS :nth-child(An+B of S) - сложные выборки без JS

Раньше «каждый второй среди подходящих» требовал либо доп. классов, либо скрипта. В Selectors 4 это решается одним селектором:

:nth-child(An+B of S)

где S - селекторный список. Браузер сначала фильтрует соседей по S, а потом нумерует оставшихся и применяет An+B.

Порядок работы

1. Берутся все соседи элемента по родителю.
2. Остаются только те, кто матчится под S.
3. Оставшиеся нумеруются в порядке документа, к ним применяется An+B.

Индекс считается только по совпавшим - остальные для нумерации не существуют.

Пример

/* 1, 3, 5… среди карточек с классом featured */
.card:nth-child(odd of .featured)