Селекторы CSS3 :nth-child()Selectors

Полное справочное руководство по селекторам CSS

Пример

Укажите цвет фона второго дочернего элемента внутри родительского элемента, соответствующего каждому элементу p:

p:nth-child(2) { background:#ff0000; }

Определение и использование

Селектор :nth-child(n) соответствует n-му дочернему элементу внутри родительского элемента, без ограничений по типу элемента.

nЭто может быть число, ключевое слово или формула.

Совет:См. такжеСелекторыЭтот селектор соответствует n-му соседнему элементу того же типа.

Синтаксис

element:nth-child(n)

elementявляется HTML-элементом, который вы хотите выбрать.
n— это параметр, который может быть ключевым словом (например,oddилиeven) или выражением (например,2n+1）。

Ключевые слова odd и even

oddВыбирает дочерние элементы на нечётных позициях.
evenВыбирает дочерние элементы на чётных позициях.

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

Числа в таблице указывают первую версию браузера, которая поддерживает это свойство.

Селекторы
:nth-child()	4.0	9.0	3.5	3.2	9.6

Другие примеры

Пример 1

Odd и even — это ключевые слова, которые можно использовать для сопоставления дочерних элементов, индекс которых нечётный или чётный (индекс первого дочернего элемента равен 1). Здесь мы задаём два разных цвета фона для нечётных и чётных элементов p:

p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; }

Попробуйте сами »

Пример 2

Используя формулу (an + b). Описание: a представляет размер цикла, n — счётчик (начиная с 0), а b — смещение. Здесь мы задаём цвет фона для всех элементов p, индекс которых кратен 3:

p:nth-child(3n+0) { background:#ff0000; }