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