Css nth of type: :nth-of-type() — CSS: Cascading Style Sheets — Вебджем.рф

Содержание

Псевдокласс :nth-of-type | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Значение по умолчанию	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:nth-of-type(odd | even | <число> | <выражение>) {…}

Значения

odd: Все нечетные номера элементов.
even: Все четные номера элементов.
число: Порядковый номер указанного элемента. Нумерация начинается с 1, это будет первый элемент в списке.
выражение: Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Первый элемент.
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd.
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
   img:nth-of-type(2n+1) { float: left; }
   img:nth-of-type(2n) { float: right; }
  </style>
 </head>
 <body>
  <p><img src="images/left.gif" alt="">
   <img src="images/right.gif" alt=""></p>
   <h2>Исторический турнир</h2>
 </body>
</html>

В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому (рис. 1).

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

Псевдоклассы

CSS по теме

Псевдокласс :nth-of-type

Статьи по теме

Рецепты CSS

Псевдокласс :nth-of-type | CSS | WebReference

Синтаксис

 Селектор:nth-of-type(odd | even | <число> | <выражение>) {...}

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

odd: Все нечётные номера элементов.
even: Все чётные номера элементов.
<число>: Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>: Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-of-type.
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10,…	Все чётные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9,…	Все нечётные элементы, аналог значения odd.
3n	3, 6, 9, 12, 15,…	Каждый третий элемент.
3n+2	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная со второго.
n+4	4, 5, 6, 7, 8,…	Все элементы, кроме первых трёх.
-n+3	3, 2, 1	Первые три элемента.
5n-2	3, 8, 13, 18, 23,…	—
even	2, 4, 6, 8, 10,…	Все чётные элементы.
odd	1, 3, 5, 7, 9,…	Все нечётные элементы.

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

:nth-of-type(n+2):nth-of-type(-n+5) { … }

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>nth-of-type</title> <style> img:nth-of-type(2n+1) { float: left; } img:nth-of-type(2n) { float: right; } </style> </head> <body> <p><img src=»image/left-knight.gif» alt=»»> <img src=»image/right-knight.gif» alt=»»></p> <h2>Исторический турнир</h2> </body> </html>

В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому (рис. 1).

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

Спецификация

Спецификация	Статус
Selectors Level 4	Рабочий проект
Selectors Level 3	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.

Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


9	12	4	9. 5	3.1	3.5


2.1	1	9.5	3.1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;

— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Псевдоклассы

См. также

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

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

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

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

/* Выбирает второй элемент родственных элементов div */
div:nth-of-type(2) {
фон: красный;
}

/* Выбирает второй элемент li в списке */
li:nth-of-type(2) {
background: lightgreen;
}

/* Выбор каждый третий элемент среди любой группы братьев и сестер */
:n-й тип(3) {
фон: желтый;
}

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

Другие примеры «Попробуйте сами» ниже.

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

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

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

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

Версия:	CSS3

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

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

Селектор
:n-й тип()	4,0	9,0	3,5	3,2	9,6

Синтаксис CSS

:nth-of-type( номер ) {
объявления css ;
} Демо

Дополнительные примеры

Пример

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

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

p: n-й тип (нечетный) {
фон: красный;
}

p:n-й тип (четный) {
фон: синий;
}

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

Пример

Используя формулу ( an + b ). Описание: представляет собой размер цикла, n — счетчик (начинается с 0), b — счетчик. значение смещения.

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

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

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

Пример

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

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

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

❮ Предыдущая Справочник по селекторам CSS Далее ❯

НАБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Что такое nth-of-type в CSS?

Бесплатный курс по Javascript — освоение основ

Автор: Мринал Бхаттачарья

Бесплатно

4.8

Зачислено:
19174
9 0002 Начать обучение Просмотреть все курсы
Бесплатный курс Javascript — Освоение основ
Мринал Бхаттачарья
Бесплатно
4.8
Зачислено: 19174
Начать обучение
Давайте рассмотрим задачу, которую мы хотим решить, чтобы понять, что это за n-го типа в CSS. Скажем, например, мы хотим покрасить каждый альтернативный элемент в списке в синий цвет, как показано на рисунке ниже.
Теперь, чтобы выполнить эту задачу, мы можем добавить два класса «нечетные» и «четные» и закрасить нечетные классы синим цветом. Но может возникнуть ситуация, когда мы хотим последовательно раскрасить 3 элемента в порядке красного, зеленого и синего. Тогда создание трех разных классов для решения проблемы — это не то, что мы бы назвали умным кодированием, верно? Эту проблему можно решить с помощью nth-of-type в CSS.
Определение
:nth-of-type — это селектор, который позволяет нам использовать формулу (или выражение) для выбора одного или нескольких элементов на основе их исходного порядка. Это определяется как «структурный псевдокласс» в спецификации CSS Selectors Level 3. Другими словами, они используются для стилизации только тех элементов, которые являются n-м дочерним элементом родительского элемента. Эти n могут быть числом, ключевым словом или выражением.
Синтаксис
Тип 1:

:nth-of-type(число) { css объявления; }
Тип 2:

:nth-of-type(ключевое слово) { css объявления; }
:::раздел {. tip} Примечание. В основном используются ключевые слова «четные» и «нечетные». :::
Тип 3:

:nth-of-type(выражение/формула) { css объявления; }
Примеры
Теперь давайте рассмотрим несколько примеров, чтобы лучше понять, как Селектор nth-of-type работает.
Пример 1
Давайте рассмотрим пример, в котором мы окрашиваем нечетные и четные элементы абзаца двумя разными цветами фона.
HTML:

<тело>
Абзац 1

Абзац 2

Абзац 3

Абзац 4

Абзац 5

Абзац 6

Параграф 7

Абзац 8

CSS:

p:nth-of-type(четный){ цвет фона: #CDFCF6; } p: n-й тип (нечетный) { цвет фона: #BCCEF8; }
Здесь мы использовали синтаксис типа 2 :nth-of-type(keyword) . Все четные элементы p имеют один цвет фона, а нечетные — другой!
Выход:
Пример 2
Возьмем другой пример, где мы будем указывать цвет фона элемента p, индекс которого кратен 3.
HTML:

<тело>
Абзац 1

Абзац 2

Абзац 3

Абзац 4

Абзац 5

Абзац 6

Параграф 7

Абзац 8

CSS:

p:nth-of-type(3n){ цвет фона: #CDFCF6; }
Здесь мы использовали синтаксис типа 3 :nth-of-type(выражение/формула) . Цвет фона элемента p, индекс которого кратен 3, был изменен.
Результат:
Совместимость с браузером
Теперь давайте рассмотрим совместимость с браузером. Цифры в таблице указывают на первую версию браузера, которая полностью поддерживала эти селекторы.

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

Псевдокласс :nth-of-type | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

CSS по теме

Статьи по теме

Рецепты CSS

Псевдокласс :nth-of-type | CSS | WebReference

Синтаксис

Значения

Пример

Спецификация

Браузеры

См. также

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

Пример

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

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

Синтаксис CSS

Дополнительные примеры

Пример

Пример

Пример

НАБОР ЦВЕТА

Лучшие учебники

Основные каталожные номера

Основные примеры

Что такое nth-of-type в CSS?

Определение

Синтаксис

Примеры

Пример 1

Пример 2

Совместимость с браузером

Добавить комментарий Отменить ответ

Рубрики