CSS : nth-child() Селектор
Пример
Укажите цвет фона для каждого элемента <p>, который является вторым дочерним элементом его родителя:
p:nth-child(2)
{
background: red;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Селектор соответствует каждому элементу, который является n -м дочерним элементом, независимо от типа, его родителя.:nth-child(n)
n может быть числом, ключевым словом или формулой.
Совет: Посмотрите на селектор :nth-of-type() , чтобы выбрать элемент, который является n -м дочерним элементом определенного типа своего родителя.
Версия: | CSS3 |
---|
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает селектор.
Selector | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Синтаксис CSS
:nth-child(number) {
css declarations;
}
Дополнительные примеры
Пример
Нечетные и четные — это ключевые слова, которые можно использовать для сопоставления дочерних элементов с четным или нечетным индексом (индекс первого дочернего элемента равен 1).
Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:
p:nth-child(odd)
{
background: red;
}
p:nth-child(even)
{
background: blue;
}
Пример
Используя формулу ( an + b ). Описание: a представляет размер цикла, n — счетчик (начиная с 0), а b — значение смещения.
Здесь мы указываем цвет фона для всех элементов p, индекс которых кратен 3:
p:nth-child(3n+0)
{
background: red;
}