CSS :nth-of-type() псевдокласс

Определение и использование

CSS :nth-of-type(n) псевдоклассы используются для выбора элементов, которые являются nth child в их родительском элементе по типу (имя тега). n элементов, каждый из которых является nth child в их родительском элементе.

n может быть числом/индексом, ключевым словом (нечетный или четный) или формулу (например an + b)

Совет:Смотрите :nth-child() псевдоклассы используются для выбора элементов, которые являются nth child в их родительском элементе, n элементов, не зависимо от их типа.

Пример

Пример 1

Как использовать :nth-of-type() Выборщик:

/* Выбирает второй элемент среди братских div элементов */
div:nth-of-type(2) {
  background: red;
}
/* Выбирает второй li элемент в списке */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Выбирает каждый третий элемент в每组 братских элементов */
:nth-of-type(3) {
  background: yellow;
}

попробуйте сами

Пример 2

нечетный и четный является ключевым словом, которое можно использовать для выбора элементов с нечетными или четными индексами (индекс первого подэлемента равен 1).

Здесь мы задаем разные цвета фона для элементов <p> с нечетными и четными индексами:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

попробуйте сами

Пример 3

используя формулу (an + b)a является целым шагом, n — все неотрицательные целые числа, начинающиеся с 0,b является целым смещением.

Здесь мы задаем цвет фона для всех элементов <p>, индекс которых является кратным 3 (выбираем третий, шестой,第九ый и т.д. элементы):

p:nth-of-type(3n+0) {
  background: red;
}

попробуйте сами

Пример 4

Здесь мы задаем цвет фона для всех элементов <p>, индекс которых является кратным 3, затем мы вычитаем 1 (выбираем второй, пятый, восьмой и т.д. элементы):

p:nth-of-type(3n-1) {
  background: red;
}

попробуйте сами

CSS грамматика

:nth-of-type(index | нечетный | четный | an+b) {
  css declarations;
}

Технические детали

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдокласс.