Селекторы псевдоклассов :nth-child() и :nth-last-child()
Выбирайте элементы в DOM по их индексу, используя селектор псевдокласса :nth-child(). Использование микросинтаксиса 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.
Оставив без изменений параметр B, можно придумать более творческий способ выбора элементов. Например:
- :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"), или стилизации родительского элемента на основе количества его дочерних элементов, можно использовать :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 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; }
Это же круто, не так ли?