Пseudo-class :nth-child() в CSS

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

CSS :nth-child(n)}} псевдо классы используются для выбора элементов, которые являются n элементов-подэлементов.

Этот псевдо класс соответствует элементам на основе их индекса в списке подэлементов родительского элемента.

n может быть числом/индексом, ключевым словом (нечетный или четный) или формулу (например an + b)

Совет:См. :nth-of-type() псевдо классы используются для выбора элементов, которые являютсяоднотипных (имени тега)го n элементов-подэлементов.

Пример

Пример 1

Как использовать :nth-child() Псевдо классы:

/* Выбирает каждый четвертый элемент из每组 братьев */
:nth-child(4) {
  background-color: yellow;
}
/* Выбирает второй элемент из братьев div */
div:nth-child(2) {
  background-color: red;
}
/* Выбирает второй li элемент списка */
li:nth-child(2) {
  background-color: lightgreen;
}

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

Пример 2

нечетный и четный является ключевым словом, которое можно использовать для выбора элементов с нечетными или четными индексами (индекс первого подэлемента составляет 1).

Здесь мы指定 разные фоновые цвета для элементов <p> с нечетными и четными индексами:

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

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

Пример 3

Используя формулу (an + b) Описание:a является целым шагом, n - все неnegative целые числа, начинающиеся с 0,b является целым смещением.

Здесь мы指定 фоновый цвет для всех элементов <p>, у которых индекс является кратным 3 (выбираем третий, шестой, девятый и т.д. элементы):

p:nth-child(3n+1) {
  background-color: red;
}

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

Пример 4

Здесь мы指定 фоновый цвет для всех элементов <p>, у которых индекс является кратным 3. Затем мы вычитаем 1 (выбираем первый, четвертый, седьмой и т.д. элементы):

p:nth-child(3n-1) {
  background-color: red;
}

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

CSS грамматика

:nth-child(index | нечетный | четный | an+b) {
  css declarations;
}

Технические детали

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

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