Nth css: Псевдокласс :nth-child

Содержание

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

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:nth-child(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	Первый элемент, является синонимом псевдокласса :first-child.
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-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   tr:nth-child(2n) {
    background: #f0f0f0; /* Цвет фона */
   } 
   tr:nth-child(1) {
    background: #666; /* Цвет фона */
    color: #fff; /* Цвет текста */
   } 
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table> 
 </body>
</html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

:nth-child — Веб-технологии для разработчиков

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

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

Синтаксис

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

Ключевые слова

odd: Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
even: Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.

Функциональная запись

<An+B>: Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть <integer>s.

Формальный синтаксис

:nth-child( <nth> [ of <complex-selector-list> ]? )где 
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#
где 
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
где 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]
где 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
где 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
где 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Примеры

Примеры селекторов

tr:nth-child(odd) или tr:nth-child(2n+1): Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
tr:nth-child(even) or tr:nth-child(2n): Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.
:nth-child(7): Описывает седьмой элемент.
:nth-child(5n): Описывает элементы с номерами 5, 10, 15, и т. д.
:nth-child(3n+4): Описывает элементы с номерами 4, 7, 10, 13, и т. д.
:nth-child(-n+3): Описывает первые три элемента среди группы соседних элементов.
p:nth-child(n): Описывает каждый элемент<p> среди группы соседних элементов. Эквивалентно простому селектору p.
p:nth-child(1) или p:nth-child(0n+1): Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child.

Подробный пример

HTML

<h4><code>span:nth-child(2n+1)</code>, БЕЗ элемента
   <code>&lt;em&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div>
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h4><code>span:nth-child(2n+1)</code>, С элементом
   <code>&lt;em&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 5 и 7 будут выбраны.<br>
   3 используется в подсчёте потому что это элемент-потомок, 
   но он не выбран потому что он не <code>&lt;span&gt;</code>.</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h4><code>span:nth-of-type(2n+1)</code>, С элементом
   <code>&lt;em&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 4, 6 и 8 будут выбраны.<br>
   3 не используется в подсчёте и не выбран, потому что это <code>&lt;em&gt;</code>, 
   но не <code>&lt;span&gt;</code>, а <code>nth-of-type</code> выбирает только
   потомков этого типа. Элемент <code>&lt;em&gt;</code> полностью пропускается и игнорируется.</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

Результат

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

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

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`:nth-child()`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 3.5	IE Полная поддержка 9	Opera Полная поддержка 9.5 Полная поддержка 9.5 Замечания Before Opera 15, Opera does not handle dynamically inserted elements for `:nth-child()`.	Safari Полная поддержка 3.1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10.1 Полная поддержка 10.1 Замечания Before Opera 15, Opera does not handle dynamically inserted elements for `:nth-child()`.	Safari iOS Полная поддержка 3.1	Samsung Internet Android Полная поддержка 1.0
Matches elements with no parent	Chrome Полная поддержка 57	Edge Полная поддержка 79	Firefox Полная поддержка 52	IE Нет поддержки Нет	Opera Полная поддержка 44	Safari Нет поддержки Нет	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 52	Opera Android Полная поддержка 43	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 7.0
`of <selector>` syntax	Chrome Нет поддержки Нет Нет поддержки Нет Замечания See bug 304163.	Edge Нет поддержки Нет Нет поддержки Нет Замечания See bug 304163.	Firefox Нет поддержки Нет Нет поддержки Нет Замечания See bug 854148.	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Полная поддержка 9	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Нет поддержки Нет Нет поддержки Нет Замечания See bug 854148.	Opera Android Нет поддержки Нет	Safari iOS Полная поддержка 9	Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка: Полная поддержка
Нет поддержки: Нет поддержки
Смотрите замечания реализации.: Смотрите замечания реализации.

См. также

Nth-child и nth-of-type • Про CSS

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

Вот простой пример полосатых таблиц:

Полоски помогают легче скользить глазами по длинной строке или столбцу, это увеличивает читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:


TR:nth-child(odd) {
  background: #EEE;
}


TD:nth-child(odd) {
  background: #EEE;
}

Или вот что можно сделать с обычным списком вроде такого:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Никаких дополнительных классов, все сделано только с помощью :nth-child:

Вот пример разноцветного дизайна для ЖЖ, где используется этот же эффект:

Если у вас есть ЖЖ, вы можете установить этот дизайн из каталога.

Как работает nth-child()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент.
Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого.
Если размер цикла не задан — (n) — выберутся все элементы списка.
Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

nth-child в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры

:nth-child(3n)

Выбирает каждый 3-й элемент списка.

:nth-child(3n+1)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.

:nth-child(even) = :nth-child(2n)

(even) — ключевое слово, выбирает четные элементы списка, как если бы мы задали (2n).

:nth-child(odd) = :nth-child(2n+1)

(odd) — ключевое слово, выбирает нечетные элементы, как если бы мы задали (2n+1).

:nth-child(3n-1) = :nth-child(3n+2)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.

:nth-child(5) = :nth-child(0n+5)

Выберет 5-й элемент списка.

:nth-child(n+6)

Выберет все элементы начиная с 6-го.

:nth-child(-n+6)

Выберет 6 элементов с начала списка.

Сочетания селекторов

:nth-child(n+3):nth-child(-n+8)

Выберет элементы в диапазоне от 3 до 8-ми.

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

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

:nth-child(3n+1):nth-child(even)

Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.

:nth-child(n+3):nth-child(-n+8):nth-child(even)

Выберет элементы с 3-го по 8-й, а затем только четные из них.

nth-of-type()

Все примеры выше сделаны на основе однородного списка, но что если нам требуется выбрать, например, несколько абзацев в статье, которая содержит не только абзацы, но и заголовки?

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

но результат будет каким-то странным (слева), и если попробовать написать то же самое, но без тега (справа) — сразу становится ясно почему:

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

Чтобы выбрать только абзацы, нам потребуется другой селектор — :nth-of-type:

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

:nth-child удобно использовать в сочетании с Sass:

С помощью :nth-child одинаковым элементам списка заданы разноцветные рамки и разные фоновые картинки.

Используя широкие возможности этих технологий можно делать не только забавные галереи с котятами, но и прочие нарядные штуки разной степени бесполезности (нажмите Rerun, если анимация застыла):

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

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

Псевдоклассы nth-child и nth-last-child CSS

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

ul li:nth-child(1) {...}

Так и выражение, которое задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.

:nth-child(3n+2) или :nth-child(-n+3)

Также доступны значении odd и even, которые определяют четные и нечетные элементы.

Псевдокласс :nth-last-child делает все тоже самое, только с конца списка элементов.

Примеры использования у списка <ul>:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	...
	<li>30</li>
</ul>

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7…

ul li:nth-child(odd) {
	background: skyblue;
}

/* или */
ul li:nth-child(2n+1) {
	background: skyblue;
}

Чётные

Чётные номера элементов: 2, 3, 6, 8…

ul li:nth-child(even) {
	background: skyblue;
}

/* или */
ul li:nth-child(2n) {
	background: skyblue;
}

Определенные номера

Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.

ul li:nth-child(2), ul li:nth-child(4), ul li:nth-child(6), ul li:nth-child(9) {
	background: skyblue;
}

Каждый третий элемент

Элементы 3, 6, 9, 12…

ul li:nth-child(3n) {
	background: skyblue;
}

Один через три

Элементы 1, 5, 9, 13…

ul li:nth-child(4n+1) {
	background: skyblue;
}

Два через два

Элементы 1, 2, 5, 6, 9, 10…

ul > li:nth-child(4n+1), ul li:nth-child(4n+2) {
	background: skyblue;
}

Два через три

Элементы 1, 2, 6, 7, 11, 12…

ul > li:nth-child(5n+1), ul li:nth-child(5n+2) {
	background: skyblue;
}

Три через три

Элементы 1, 2, 3, 7, 8, 9…

ul > li:nth-child(6n+1), ul li:nth-child(6n+2), ul li:nth-child(6n+3) {
	background: skyblue;
}

Первые десять

ul li:nth-child(-n+10) {
	background: skyblue;
}

Диапазон

C третьего по пятнадцатый:

ul li:nth-child(n+3):nth-child(-n+15) {
	background: skyblue;
}

Все, после десятого

ul li:nth-child(n+11) {
	background: skyblue;
}

Все, кроме последнего

ul li:nth-last-child(n+2) {
	background: skyblue;
}

Последний элемент

ul li:nth-last-child(1) {
	background: skyblue;
}

Последние три

ul li:nth-last-child(-n+3) {
	background: skyblue;
}

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

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

Синтаксис

Селектор:nth-child(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-child.
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-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

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

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>nth-child</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-spacing: 0; /* Расстояние между ячейками */
}
tr:nth-child(2n) {
background: #f0f0f0; /* Цвет фона */
}
tr:nth-child(1) {
background: #666; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<table border=»1″>
<tr>
<td> </td><td>2134</td><td>2135</td>
<td>2136</td><td>2137</td><td>2138</td>
</tr>
<tr>
<td>Нефть</td><td>16</td><td>34</td>
<td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>4</td><td>69</td>
<td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>7</td><td>73</td>
<td>79</td><td>34</td><td>86</td>
</tr>
<tr>
<td>Камни</td><td>23</td><td>34</td>
<td>88</td><td>53</td><td>103</td>
</tr>
</table>
</body>
</html>

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

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

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

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

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

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

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

CSS селекторы

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

Псевдокласс :nth-child() позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера).

Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

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

CSS синтаксис:

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

Версия CSS

CSS3

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

Стилизация по порядковому номеру

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

Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю.
Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
/* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя
и каждый второй элемент <li> своего родителя  */
h3:nth-child(3), li:nth-child(2) { 
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

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

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

Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

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

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

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

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента <tr>, который определяет строку таблицы:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация четных и нечетных дочерних элементов</title>
<style>
.primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
.primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
caption {/* селектор типа (выбираем HTML элемент <caption>) */
color: red; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<table class = "primer1">
			<caption>Значение even (четные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
		<table class = "primer2">
			<caption>Значение odd (нечетные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child() мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.

Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

Псевдокласс :nth-child() позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле.
Давайте рассмотрим следующий селектор и разберем, что значит эта запись:

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

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

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

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

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

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

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

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация дочерних элементов по математической формуле</title>
<style>
td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */
border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */
width: 50px;  /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */
}
td:nth-child(4n+2) {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы.
Результат нашего примера:

Пример cтилизации дочерних элементов по математической формуле.

Отличие :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-of-type | CSS | WebReference

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

Синтаксис

Селектор: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…

Табл. 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 к изображениям

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

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

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

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

CSS: селектор nth-child ()

Пример

Укажите цвет фона для каждого элемента

, который является вторым дочерним элементом
его родитель:

p: nth-ребенок (2)
{

фон: красный;
}

Попробуй сам »

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

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

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

n может быть числом, ключевым словом или формулой.

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

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

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

Селектор
: nth-child ()	4.0	9,0	3,5	3,2	9,6

Синтаксис CSS

: nth-child ( номер ) {
декларации css ;
}
Демо

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

Пример

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

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

p: nth-child (нечетный)
{

фон: красный;
}

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

Попробуй сам »

Пример

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

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

p: n-й ребенок (3n + 0)
{
фон: красный;
}

Попробуй сам »

: nth-of-type () — Веб-технология для разработчиков

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

 / * Выбирает каждый четвертый элемент 
   среди любой группы братьев и сестер * /
p: nth-of-type (4n) {
  цвет: салатовый;
}

Синтаксис

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

См. : nth-child для более подробного объяснения его синтаксиса.

Формальный синтаксис

: nth-of-type () , где 
   =  | даже | нечет

Примеры

Базовый пример

HTML

 
   Этот элемент не учитывается. 
   1-й абзац 
   2-й абзац 
   Этот элемент не учитывается.
   3-й абзац 
   4-й абзац

CSS

 / * Нечетные абзацы * /
p: nth-of-type (2n + 1) {
  красный цвет;
}

/ * Четные абзацы * /
p: nth-of-type (2n) {
  цвет синий;
}

/* Первый параграф */
p: nth-of-type (1) {
  font-weight: жирный;
}

/ * Это не имеет никакого эффекта, поскольку класс .fancy находится только на 4-м элементе p, а не на 1-м * /
p.fancy: nth-of-type (1) {
  текст-оформление: подчеркивание;
}

Результат

Технические характеристики

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

Обновление данных о совместимости на GitHub

Рабочий стол Мобильный

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet

	Рабочий стол	Мобильный
`: nth-of-type ()`	Chrome Полная поддержка 1	Край Полная поддержка 12 Полная поддержка 12 Примечания До версии Edge 16 Microsoft Edge обрабатывает все неизвестные элементы (например, настраиваемые элементы) как элементы одного типа.	Firefox Полная поддержка 3,5	IE Полная поддержка 9 Полная поддержка 9 Примечания Internet Explorer обрабатывает все неизвестные элементы (например, настраиваемые элементы) как элементы одного типа.	Opera Полная поддержка 9.5	Safari Полная поддержка 3.1	WebView Android Полная поддержка 2	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Опера Android Полная поддержка 10.1	Safari iOS Полная поддержка 3.1	Samsung Интернет Android Полная поддержка 1.0

: nth-of-type ()

Chrome
Полная поддержка

1

Край
Полная поддержка

12

Полная поддержка 12: Примечания До версии Edge 16 Microsoft Edge обрабатывает все неизвестные элементы (например, настраиваемые элементы) как элементы одного типа.

Firefox
Полная поддержка

3,5

IE
Полная поддержка

9

Полная поддержка 9: Примечания Internet Explorer обрабатывает все неизвестные элементы (например, настраиваемые элементы) как элементы одного типа.

Opera
Полная поддержка

9.5

Safari
Полная поддержка

3.1

WebView Android
Полная поддержка

2

Chrome Android
Полная поддержка

18

Firefox Android
Полная поддержка

4

Опера Android
Полная поддержка

10.1

Safari iOS
Полная поддержка

3.1

Samsung Интернет Android
Полная поддержка

1.0

Условные обозначения

Полная поддержка: Полная поддержка
См. Примечания по реализации.: См. Примечания по реализации.

См. Также

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

Пример

Укажите цвет фона для каждого элемента

, который является вторым элементом p
своего родителя:

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

Попробуй сам »

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

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

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

n может быть числом, ключевым словом или формулой.

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

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

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

Селектор
: nth-of-type ()	4.0	9,0	3,5	3,2	9,6

Синтаксис CSS

: nth-of-type ( номер ) {
декларации css ;
}
Демо

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

Пример

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

p: nth-of-type (нечетный)
{
фон: красный;
}

p: nth-of-type (четное)
{
фон: синий;
}

Попробуй сам »

Пример

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

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

Попробуй сам »

html — CSS nth-child для больше и меньше

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Декабрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Nth css: Псевдокласс :nth-child | htmlbook.ru

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

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

Версии CSS

Описание

Синтаксис

Значения

:nth-child — Веб-технологии для разработчиков

Синтаксис

Ключевые слова

Функциональная запись

Формальный синтаксис

Примеры

Примеры селекторов

Подробный пример

HTML

CSS

Результат

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

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

Легенда

См. также

Nth-child и nth-of-type • Про CSS

Как работает nth-child()?

Примеры

:nth-child(3n)

:nth-child(3n+1)

:nth-child(even) = :nth-child(2n)

:nth-child(odd) = :nth-child(2n+1)

:nth-child(3n-1) = :nth-child(3n+2)

:nth-child(5) = :nth-child(0n+5)

:nth-child(n+6)

:nth-child(-n+6)

Сочетания селекторов

:nth-child(n+3):nth-child(-n+8)

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

:nth-child(3n+1):nth-child(even)

:nth-child(n+3):nth-child(-n+8):nth-child(even)

nth-of-type()

Псевдоклассы nth-child и nth-last-child CSS

Нечётные

Чётные

Определенные номера

Каждый третий элемент

Один через три

Два через два

Два через три

Три через три

Первые десять

Диапазон

Все, после десятого

Все, кроме последнего

Последний элемент

Последние три

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

Синтаксис

Обозначения

Значения

Пример

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

Браузеры

Автор и редакторы

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

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

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

CSS синтаксис:

Версия CSS

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

Стилизация по порядковому номеру

Стилизация по ключевому слову

Стилизация по простой математической формуле

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

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

Синтаксис

Обозначения

Значения

Пример

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

Браузеры

Автор и редакторы