Селектор :nth-child(n)
Указать цвет фона для каждого элемента <p>, который является вторым дочерним элементом его родителя:
p:nth-child(2)
{
background: red;
}
Попробуйте сами »
Определение :nth-child(n)
Селектор :nth-child(n)
соответствует каждому элементу, который является n - дочерним элементом, независимо от типа, его родителя, n это может быть число, ключевое слово или формула.
Совет: Посмотрите на селектор :nth-of-type() для выбора элемента, который является n - ребенком, определенного типа , его родителя.
Версия: | CSS3 |
---|
Поддержка браузеров :nth-child(n)
Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.
Селектор | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Синтаксис :nth-child(n)
Ещё примеры :nth-child(n)
Нечетные и четные - ключевые слова, которые можно использовать для сопоставления дочерних элементов, индекс которых нечетный или четный (индекс первого дочернего элемента равен 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;
}
Попробуйте сами »
Здесь мы указываем цвет фона для всех p элементов, индекс которых кратен 3. Затем мы вычитаем 1 (выберем второй, пятый, восьмой и т. д.):
p:nth-child(3n-1) {
background: red;
}
Попробуйте сами »