CSS псевдокласс :nth-of-type()
находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.
/* Выбирает каждый четвёртый элемент <p>
среди любой группы соседних элементов. */
p:nth-of-type(4n) {
color: lime;
}
Синтаксис
Псевдокласс nth-of-type
указывается с единственным аргументом, описывающим паттерн для выбора элементов.
Более детальное описание синтаксиса может быть найдено на странице псевдокласса :nth-child
.
Формальный синтаксис
Примеры
Базовый пример
HTML
<div>
<div>Этот элемент не учитывается.</div>
<p>Первый параграф.</p>
<p>Второй параграф.</p>
<div>Этот элемент не учитывается.</div>
<p>Третий параграф.</p>
<p>Четвёртый параграф.</p>
</div>
CSS
/* Нечётные параграфы */
p:nth-of-type(2n+1) {
color: red;
}
/* Чётные параграфы */
p:nth-of-type(2n) {
color: blue;
}
/* Первый параграф */
p:nth-of-type(1) {
font-weight: bold;
}
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
Selectors Level 4 Определение ':nth-of-type' в этой спецификации. |
Рабочий черновик | Теперь выбранные элементы не обязательно должны иметь родителя. |
Selectors Level 3 Определение ':nth-of-type' в этой спецификации. |
Рекомендация | Изначальное определение. |
Поддержка браузерами
BCD tables only load in the browser