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