Css nth of type: :nth-of-type() — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

Псевдоклассы группы type — CSS — Дока

Кратко

Секция статьи «Кратко»

Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка:

  • :first-of-type — первый;
  • :nth-of-type(n-число) — каждый n-й элемент;
  • :last-of-type — последний;
  • :nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».

Пример

Секция статьи «Пример»

Допустим, мы имеем такую HTML-разметку:

<ol>  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>  <li>Амбары красят в красный цвет, потому что красная краска. ..</li>  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>  <li>В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>  <li>Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>  <li>Розы красят в синий цвет при помощи пищевых красителей.</li>  <li>Чёрный на чёрном не виден.</li></ol>
          <ol>
  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>
  <li>Амбары красят в красный цвет, потому что красная краска...</li>
  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>
  <li>В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>
  <li>Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>
  <li>Розы красят в синий цвет при помощи пищевых красителей.</li>
  <li>Чёрный на чёрном не виден.</li>
</ol>

И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.

Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li> по порядку:

li:nth-of-type(3) {  color: #41E847;}
          li:nth-of-type(3) {
  color: #41E847;
}

2-й, 4-й, 6-й пункты с классом .list__item имеют синий цвет, т. е. каждый чётный:

.list__item:nth-of-type(2n) {  color: #2E9AFF;}
          .list__item:nth-of-type(2n) {
  color: #2E9AFF;
}

Нечётные элементы записываются как :nth-of-type(2n+1).

5-й <li> (или 3-й .list__item) — жёлтый:

li:nth-of-type(5),.list__item:nth-of-type(3) {  color: #FFD829;}
          li:nth-of-type(5),
.list__item:nth-of-type(3) {
  color: #FFD829;
}

Последний пункт должен быть белым (укажем это и для тега, и для класса):

li:nth-last-of-type(1),. list__item:last-of-type {  color: #FFFFFF;}
          li:nth-last-of-type(1),
.list__item:last-of-type {
  color: #FFFFFF;
}
Открыть демо в новой вкладке

Если нам нужно выбрать единственный элемент своего родителя, используется псевдокласс :only-of-type (что эквивалентно комбинации

:first-of-type:last-of-type):

Открыть демо в новой вкладке

Как пишется

Секция статьи «Как пишется»

💡 Как и у всех псевдоклассов, слева от :-разделителя можно указать дополнительный селектор, к которому нужно применить правило. Если его не указать, правило будет применено для каждого подходящего элемента.

Для порядковых псевдоклассов (:nth-of-type(n-число) и :nth-last-of-type(n-число)) для обозначения кратности (каждый n-й элемент) используется запись в формате целое число плюс буква n, например:

p:nth-of-type(4n) {  /* Стили */}
          p:nth-of-type(4n) {
  /* Стили */
}

Будет выбран каждый 4-й элемент (если таковой будет в общем родителе на одном уровне вложенности).

Для обозначения чётных или нечётных элементов можно использовать числовое выражение.

Выберет все чётные элементы:

p:nth-of-type(2n) {  /* Стили */}
          p:nth-of-type(2n) {
  /* Стили */
}

Выберет все нечётные элементы:

p:nth-of-type(2n + 1) {  /* Стили */}
          p:nth-of-type(2n + 1) {
  /* Стили */
}

Также для обозначения чётных или нечётных элементов можно использовать именованную форму:

Выберет все чётные элементы — то же самое, что p:nth-of-type(2n):

p:nth-of-type(even) {  /* Стили */}
          p:nth-of-type(even) {
  /* Стили */
}

Выберет все нечётные элементы — то же самое, что p:nth-of-type(2n+1):

p:nth-of-type(odd) {  /* Стили */}
          p:nth-of-type(odd) {
  /* Стили */
}

Аргументы

Секция статьи «Аргументы»

Для числовых псевдоклассов (:nth-of-type(n) и :nth-last-of-type(n)) обязательно наличие n-числа в аргументах.

Подсказки

Секция статьи «Подсказки»

💡 Выбор первого (:first-of-type) или последнего (:last-of-type) элемента «грамматически» эквивалентен числовому формату — :nth-of-type(1) для первого элемента и :nth-last-of-type(1) для последнего соответственно, но не требует указания числа-аргумента.

💡 Если нужно выбрать такой элемент, который внутри своего родителя только в единственном экземпляре, используйте :only-of-type.

На практике

Секция статьи «На практике»

Realetive советует

Секция статьи «Realetive советует»

🛠 Эти псевдоклассы используются реже, чем Псевдоклассы группы child, но иногда нужно выбрать именно из списка однотипных элементов, а не из всех детей своего родителя.

Псевдокласс :nth-of-type() | CSS справочник

CSS селекторы

Значение и применение

Псевдокласс :nth-of-type выбирает каждый указанный элемент определенного типа, который является дочерним элементом своего родительского элемента.

Псевдокласс :nth-of-type работает, как и :nth-child, но применяется к чередующимся дочерним элементам определенного типа, а не к элементу с любым типом.

Поддержка браузерами

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
:nth-of-type()4.03.59.63.29.012.0

CSS синтаксис:

  :nth-of-type(номер | ключевое слово | формула) {
блок объявлений;
}

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

  • even (четные элементы)
  • odd (нечетные элементы)

Кроме того псевдокласс :nth-of-type(), как и :nth-child в качестве значения может использовать простую математическую формулу:

p:nth-of-type(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная со второго внутри родительского элемента будет стилизована:

  • 4n – каждый четвертый элемент определенного типа.
  • 2 – с какого элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

p:nth-of-type(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная с третьего (-1 элемента нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизован:

  • 4n – каждый четвертый элемент определенного типа.
  • -1 – с какого элемента начинать.

Версия CSS

CSS3

Пример использования

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль вторым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :nth-of-type</title>
<style>

 .test p:nth-of-type(2) { /* используем селектор потомков с псевдоклассом :nth-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-of-type мы стилизовали первые абзацы внутри каждого блока.

Результат нашего примера:

Пример использования псевдокласса :nth-of-type.

Рассмотрим пример в котором с использованием псевдокласса :nth-of-type мы будем чередовать изображения слева и справа документа:

<html>
<head>
	<meta charset = "UTF-8">
	<title>Чередование изображений с использованием псевдокласса :nth-of-type</title>
<style>
img { 
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
margin: 5px; /* внешние отступы со всех сторон */
}
img:nth-of-type(2n+1) { /* для данной задачи вместо формулы подойдут и значения ключевых слов even и odd (четные и нечетные дочерние элементы) */
float: left; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по левому краю */
border: 2px solid orange; /* устанавливаем сплошнаю границу размером 2 пикселя оранжевого цвета */
} 
img:nth-of-type(2n) { 
float: right; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по правому краю */
border: 2px solid gray; /* устанавливаем сплошнаю границу размером 2 пикселя серого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.
  jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат примера:

Пример чередования изображений с использованием псевдокласса :nth-of-type

Отличие :nth-child от :nth-of-type()

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki

:

<article>
	<p>Первый параграф </p>
	<p>Второй параграф</p> 
</article>

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

p:nth-child(2)  {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h3>), про него мы совсем забыли:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<article>
			<h3>Заголовок второго уровня</h3>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h3>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

CSS селекторы

Использование псевдокласса :nth-child — Демонстрации — HTML Academy

Что такое

:nth-child?

:nth-child — это псевдокласс, который позволяет выбирать элементы по их порядковому номеру. Например, можно выбрать пятый абзац и применить к нему нужные стили, или выбрать все четные строки в таблице и сделать её полосатой.

В этой демонстрации мы детально разберем механизм работы этого селектора. Начнем с исходной html-разметки. Работать будем с обычным списком.

Подопытный объект готов

Зададим стили для списка и его элементов. Теперь у нас есть наглядная сетка, над которой и будем экспериментировать.

: nth-child (4)

Самый простой вариант использования данного селектора: задать конкретное число. Наш селектор:

li:nth-child(4)

Он обозначает: «Выбрать четвёртый по счету элемент списка». Как видите, подсветился нужный элемент.

Несколько

:nth-child(номер)

Чтобы выбрать небольшое количество элементов, можно несколько раз использовать :nth-child с нужными номерами.

Однако, если количество таких элементов велико, то такой подход не сработает. Представьте, сколько CSS-кода нужно, чтобы выделить все чётные элементы в примере.

Не забывайте экспериментировать. Поменяйте номера в CSS-коде, чтобы подсветить другие элементы.

:nth-child(2n)

В общем виде значение этого псевдокласса задаётся с помощью выражения: an+b, где a и b — целые числа, а n — счетчик, принимающий целые значения от 0 и больше: 0,1,2,3…

Если после вычисления выражения браузер находит элемент с полученным номером, то он применяет к нему стили. Рассмотрим пример вычисления номеров для :nth-child(2n).

1. n=0; 2*0 = 0; нет элементов
2. n=1; 2*1 = 2; 2-й элемент
3. n=2; 2*2 = 4; 4-й элемент

:nth-child(even)

Выражение :nth-child(2n) соответствует всем чётным элементам. Для чётных элементов существует также специальное ключевое слово even.

:nth-child(2n+1)

Посчитаем номера для :nth-child(2n+1).

1. n=0; 2*0 + 1 = 1; 1-й элемент
2. n=1; 2*1 + 1 = 3; 3-й элемент
3. n=2; 2*2 + 1 = 5; 5-й элемент
...

Т.е. все нечётные элементы.

:nth-child(odd)

Для нечётных элементов тоже существует ключевое слово: odd.

:nth-child(odd) вместе с :nth-child(even)

Используя разные стили для чётных и нечётных элементов, можно создавать интересные визуальные эффекты. Именно таким образом, с помощью чистого CSS, делают полосатые таблицы.

:nth-child(3n-1)

Рассчитаем выражение посложнее :nth-child(3n-1).

1. n=0; 3*0 - 1 = -1; нет элементов
2. n=1; 3*1 - 1 = 2;  2-й элемент
3. n=2; 3*2 - 1 = 5;  5-й элемент
...

Поэкспериментируйте с выражением в стилях.

:nth-child(n+8)

Если использовать большое положительное число b в формуле an+b, то можно выделять все элементы, за исключением начальных. И чем больше b, тем больше начальных пропускается. Расчет для :nth-child(n+8):

1. n=0; 0+8 = 8;  8-й элемент
2. n=1; 1+8 = 9;  9-й элемент
3. n=2; 2+8 = 10; 10-й элемент
...

:nth-child(-n+14)

Можно использовать отрицательный n. Расчёт для :nth-child(-n+14):

1. n=0; 0+14 = 14; 14-й элемент
2. n=1; -1+14 = 13; 13-й элемент
...
15. n=14; -14+14 = 0; нет совпадений

Т.е. :nth-child(n+8) означает не выделять 7 элементов вначале, а все остальное выделить. :nth-child(-n+14) обозначает выделить 14 элементов в начале, а все остальное не выделять.

Комбинирование выражений

На предыдущих шагах мы с помощью разных выражений выделяли разные множества элементов. Существует возможность задавать множество с помощью комбинирования выражений.

Например: :nth-child(n+8):nth-child(-n+14). Итоговое множество получается как пересечение двух исходных:

:nth-child(n+8) выделит: 8-21
:nth-child(-n+14) выделит: 1-14
на пересечении 1-14 и 8-21: 8-14

:nth-child(n+4):nth-child(-n+18)

Комбинируя выражения, мы можем задавать произвольные диапазоны элементов. Можно немного расширить выделение из предыдущего шага.

Сдвинем левую границу: :nth-child(n+8) → :nth-child(n+4)

Сдвинем правую границу: :nth-child(-n+14) → :nth-child(-n+18)

Попробуйте поизменять размер выделения

:nth-child(n+4):nth-child(-n+18):nth-child(odd)

Можно комбинировать более двух выражений. Выражение в заголовке обозначает: «взять элементы с 4 по 18 включительно и среди них выделить только нечётные».

Два сложных множества

Мы создали множество «элементы с 4 по 18 включительно, нечётные».

Создадим второе множество «элементы с 4 по 18 включительно, чётные».

Вот такой интересный псевдокласс :nth-child, с помощью которого можно выделять практически любые множества элементов, используя их порядковый номер.

Псевдокласс

:nth-of-type

:nth-of-type работает почти так же, как и :nth-child. Разница заключается в том, что он учитывает тип элемента.

Для того, чтобы поэкспериментировать с этим псевдоклассом, изменим код примера. Вначале в HTML коде создадим список из двух элементов: span и strong. И обернём этот список в контейнер.

Второй подопытный готов

С помощью CSS оформим список. span будут лежачими прямоугольниками, а strong будут стоячими прямоугольниками.

Приступаем к экспериментам.

:nth-of-type(3)

Попробуем простейшие выражения с числом.

Выделить третий span:

span:nth-of-type(3)

Выделить пятый strong:

strong:nth-of-type(5)

:nth-of-type(odd)

Выражения с чётными/нечётными элементами.

Выделить нечётные span:

span:nth-of-type(odd)

Выделить чётные strong:

strong:nth-of-type(even)

Комбинированные

:nth-of-type

Выделить нечётные span из первых четырёх:

span:nth-of-type(odd):nth-of-type(-n+4)

Выделить чётные strong из идущих после четвёртого:

strong:nth-of-type(even):nth-of-type(n+5)

Отличие

:nth-of-type от :nth-child

Значения для двух псевдоклассов задаются абсолютно одинаково. Отличие заключается в том, что нумерация элементов при использовании :nth-of-type идёт только между потомками одного родителя заданного типа. Нумерация элементов при использовании :nth-child идёт между всеми потомками одного родителя.

Продемонстрируем это отличие еще раз. span:nth-of-type(odd) подсвечивает только нечётные лежачие прямоугольники.

Отличие

:nth-of-type от :nth-child

Если для этого же кода использовать span:nth-child(odd), то подсвечиваются все лежачие прямоугольники.

Это связано с тем, что после каждого элемента span, расположен strong, который влияет на счетчик псевдокласса :nth-child.

Практический пример использования

:nth-child

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

Сверстать такой блок не проблема. Можно задать разные классы элементам левой и правой колонок и пусть программист мучается при генерации правильного html кода страницы.

Но намного лучше сверстать такой список товаров, не используя разные классы. На этом шаге задан исходный HTML.

Практический пример: оформляем товары

Зададим базовый CSS код нашего каталога. Пунктирные линии справа и слева — это границы блока, по которым должны выравниваться края колонок.

Нужно создать двухколончатую сетку, в которой ширина каждой колонки составляет 45% от ширины родительского блока. Правая колонка прижата к правому краю, а левая к левому. Приступим.

Практический пример: сетка

Чтобы получить нужную сетку, достаточно задать следующие проценты:

45% - ширина левой колонки
10% - отступ справа левой колонки
45% - ширина правой колонки
Итого: 45% + 10% + 45% = 100%

Мы использовали box-sizing:border-box;, чтобы на ширину колонок не влияли границы. Товары расположились в одну колонку, зато она правильной ширины.

Практический пример: две колонки

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

Мы не используем разные классы для разных элементов, поэтому на помощь приходит псевдокласс li:nth-child(even). С помощью него удаляются лишние отступы и идеальная сетка готова.

Практический пример: три колонки

При таком подходе можно изменять количество колонок только с помощью CSS. То есть, HTML код страницы, а значит и логику генерации кода на сервере менять не надо.

Сначала изменим проценты:

30% - ширина колонок
5% - отступы справа у 1 и 2 колонки
Итого: 30% + 5% + 30% + 5% + 30% = 100%

Практический пример: три колонки готовы

Затем нужно удалить отступ справа у каждого третьего элемента. Для этого используем li:nth-child(3n). Готово!

Отличное решение, особенно для адаптивной верстки.

CSS :nth-of-type() Селектор

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

Например, p:nth-of-type(3) выберет третий элемент p .

CSS 
 элемент:nth-of-type(n){
/* стиль CSS */
}

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

Примеры

Аргумент n может принимать число , ключевое слово или выражение .

Присвоение числа

Вы можете передать положительное целое число в селектор, чтобы выбрать конкретный элемент.

Следующий пример содержит три абзаца. Селектор p:nth-of-type(2) выбирает второй абзац, чтобы изменить цвет фона на желтый .

HTML 
 
Это первый абзац


Это второй абзац


Это третий абзац
CSS 
 p:nth-of-type(2) {
  цвет фона: желтый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

Выдача ключевого слова

Селектор может принимать два ключевых слова — четное и нечетное .

  • Ключевое слово четный используется для выбора элементов в четных позициях (2, 4, 6 и т. д.).
  • Ключевое слово нечетное используется для выбора элементов в нечетных позициях (1, 3, 5 и т. д.).

В следующем примере p:nth-of-type(even) выбирает абзацы в четных позициях, чтобы изменить цвет их фона на желтый .

CSS 
 p:nth-of-type(четный) {
  цвет фона: желтый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

Задание выражения

Селектор также может принимать выражения вида An+B .

  • Здесь A и B могут быть целыми числами, а n могут быть нулевыми или целыми положительными числами.
  • Значение выражения An+B должно быть целым положительным числом.

Например, выражение 3n+1 выберет элементы в позициях 1, 4, 7 и т. д. (3*0+1 = 1, 3*1+1 = 4, 3*2+1 = 7)

CSS 
 p:n-го типа (3n+1) {
  цвет фона: желтый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

Посмотрите на другие примеры таких выражений.

  • :n-го типа (2n+2)
    Выбирает элементы в позициях 2, 4, 6 и т. д. (2*0+2 = 2, 2*1+2 = 4, 2*2+2 = 6)
  • :n-го типа (3n)
    Выбирает элементы в позициях 3, 6, 9 и т. д. (3*1 = 3, 3*2 = 6, 3*3 = 9)
    Обратите внимание, что мы не брали значение n здесь 0 , потому что общее значение выражения 3n не может быть равно нулю.
  • :n-го типа (n+4)
    Выбирает элементы в позициях 4, 5, 6, 7 и т. д. (0+4 = 4, 1+4 = 5, 2+4 = 6, 3+4 = 7)
  • :n-й тип (-n+3)
    Выбирает элементы в позициях 1, 2 и 3. (-0+3 = 3, -1+3 = 2, -2+3 = 1)
    Обратите внимание, что мы не брали значение n больше 2, потому что значение выражения -n+3 не может быть нулевым или отрицательным.

Другие примеры

В следующем примере p:nth-of-type(1) выбирает первый абзац и меняет цвет его шрифта на зеленый . Хотя выделенный абзац не является первым элементом, но это первый абзац.

HTML 
 
Заголовок!
 

Этот абзац является первым дочерним абзацем элемента div


Этот абзац является вторым абзацем, дочерним элементом div
CSS 
 p:nth-of-type(1) {
  цвет: зеленый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

Посмотрите на другой пример, в котором p:nth-of-type(2) span выбирает все элементы span второго p элемент в div и меняет цвет фона на желтый .

HTML 
 

   
Заголовок!
 
  
Этот абзац является первым абзацем элемента div

  
Этот абзац является вторым абзацем блока div
CSS 
 p:nth-of-type(2) span {
  цвет фона: желтый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

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

CSS 
 родительский элемент: n-й тип (n) {
/* стиль CSS */
}

Следующий пример содержит заголовки и абзацы. Обратите внимание, что тело записывается как родитель этих элементов, поскольку они не заключены ни в один элемент.

HTML 
  
Первый заголовок
 
 
Второй заголовок
 

Это первый абзац


Это второй абзац
CSS 
 body :nth-of-type(1) {
  цвет: зеленый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

Другой пример, в котором элементы заключены в div , показан ниже.

HTML 
 

   
Первый заголовок
 
   
Второй заголовок
 
  
Этот абзац является первым дочерним абзацем элемента div

  
Этот абзац является вторым абзацем, дочерним элементом div
CSS 
 div :nth-of-type(1) {
  цвет: зеленый;
}

См. пример селектора Pen :nth-of-type(n) от Aakhya Singh (@aakhya) на CodePen.

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

Этот селектор не поддерживается в IE 8 и более ранних версиях.

Псевдокласс — :nth-of-type(n)

Выбирает один или несколько дочерних элементов на основе их типа родительского элемента.

Аргумент «n» может быть любым из следующих трех способов.

  • 1) «n» может быть числом.

    Выбирает указанный элемент, когда он доступен в «n»-м индексном порядке (на основе типа).

     p:n-го типа(2)
{
    цвет фона красный;
}
    Выбирает 2-й порядок индекса (на основе типа) дочернего элемента P родительского элемента. Родительским элементом может быть любой допустимый элемент HTML.

    Пример:

    

<голова>
     Селектор псевдокласса CSS — :nth-of-type
    <стиль>
        p: n-го типа (2) {
            красный цвет;
        }
        дел {
            граница: 1px сплошной зеленый;
            ширина: 20%;
        }
    

<тело>
    <дел>
        
    Порядок индекса на основе типа 1 – элемент P
    
        
    Порядок индекса на основе типа 2 — элемент P
    
        
    Порядок индекса на основе типа 3 — элемент P
    
    
    <дел>
        
     Порядок индекса на основе типа 1 – элемент P
    
         Порядок индекса на основе типа 1 – элемент SPAN
         Порядок индекса на основе типа 2 — элемент SPAN
        
     Порядок индекса 2 на основе типа – элемент P

    Результат:

  • 2) «n» может быть ключевым словом (четным/нечетным).

    Выбирает нечетный/четный порядок индексации (на основе типа) указанных дочерних элементов родителя.

     p:n-й ребенок (четный)
{
    красный цвет;
}
    Выбирает четный (2, 4, 6, 8 и т. д.) порядок индекса (на основе типа) P дочерних элементов родителя.

    Пример:

    

<голова>
     Селектор псевдокласса CSS — :nth-of-type
    <стиль>
        p: n-й тип (четный) {
            красный цвет;
        }
        дел {
            граница: 1px сплошной зеленый;
            ширина: 20%;
        }
    

<тело>
    <дел>
        
    Индекс на основе типа 1 — элемент P
    
        
    Индекс на основе типа 2 — элемент P
    
        
    Индекс на основе типа 3 — элемент P
    
        
    Индекс на основе типа 4 — элемент P
    
    
    <дел>
        
     Индекс на основе типа 1 – элемент P
    
         Индекс на основе типа 1 — элемент SPAN
        
     Индекс на основе типа 2 – элемент P 
    
         Индекс на основе типа 2 – элемент SPAN

    Результат:

  • 3) «n» может быть формулой (an + b).

    1 «a» и «b» — целые числа. Значение «n» неявно повторяется с 0.
    2

    В примере ( p:nth-of-type(3n + 2) ) элементы выбираются следующим образом,

    3*0 + 2 = 2-й элемент.

    3*1 + 2 = 5-й элемент.

    3*2 + 2 = 8-й элемент и продолжается до конца.

    Значение «n» начинается с 0.

    3

    В формуле (an + b), если

    1) значения «a» и «b» больше 0 и

    2) значение «a» больше или равно значению «b» (например, 3n+2), затем

    Элементы делятся на группу элементов «a» (число) и выбирают каждый указанный элемент индекса «b» (на основе типа) из каждой группы.

Пример:



<голова>
     Селектор псевдокласса CSS — :nth-of-type
    <стиль>
        дел {
            ширина: 10%;
            плыть налево;
        }
        .clsNth p:nth-of-type(2) {
            цвет фона: красный;
        }
        .clsKeyWord p:n-го типа (четное) {
            цвет фона: зеленый;
            белый цвет;
        }
        .clsFormula p:n-го типа (3n + 2) {
            цвет фона: желтый;
        }
        .clsFormula2 p:nth-of-type(2n + 3) { /* a < b */
            цвет фона: желтый;
        }
    

<тело>
    <дел>
        Начать
        
Один

        
 Два 

        
 Три 

        
 Четыре 

        
 Пять 

        
Шесть 

        
 Семь 

        
 Восемь 

        
 Девять 

        
 Десять 

        Конец
<дел> Начать

Один

Два

Три

Четыре

Пять

Шесть

Семь

Восемь

Девять

Десять

Конец
<дел> Начать

Один

Два

Три

Четыре

Пять

Шесть

Семь

Восемь

Девять

Десять

Конец
<дел> Начать

Один

Два

Три

Четыре

Пять

Шесть

Семь

Восемь

Девять

Десять

Конец