<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>		
	<tr>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
		<td>10</td>
	</tr>	
	<tr>
		<td>11</td>
		<td>12</td>
		<td>15</td>
		<td>14</td>
		<td>15</td>
	</tr>	
</table> 

. chess tr:nth-child(odd) td:nth-child(odd) {
	background: Orange;
}	
.chess tr:nth-child(even) td:nth-child(even) {
	background: Orange;
}
 

2

Display table

Такой метод работает и на вёрстке блоками с display: table, table-row, table-cell.

<div>
	<div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>		
	<div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</div>	
	<div>
		<div>11</div>
		<div>12</div>
		<div>15</div>
		<div>14</div>
		<div>15</div>
	</div>	
</div> 

. chess {
	display: table;
}
.chess-tr {
	display: table-row;
}
.chess-tr div {
	display: table-cell;
}		

.chess .chess-tr:nth-child(odd) div:nth-child(odd) {
	background: Gold;
}	
.chess .chess-tr:nth-child(even) div:nth-child(even) {
	background: Gold;
} 

3

Верстка на плавающих блоках

C элементами с float: left или display: inline-block сложнее т.к. из CSS не узнать какой элемент начинается с новой строки.

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
</ul> 

. chess {
	width: 500px;   
	margin: 0 auto;	
	padding: 0;
	list-style: none;
}
.chess li {
	float: left;
 	width: 19%;   
	border: 1px solid #ddd;
	margin: -1px -1px 0 0; /* Уберем двойную рамку */ 
	padding: 40px 0;
	text-align: center;
}

Если количество элементов по горизонтали нечетное, все просто – достаточно добавить фон только нечетным:

.chess li:nth-child(odd) {
	background: PaleGreen;
}

.chess li:nth-child(1),
.chess li:nth-child(3),
.chess li:nth-child(6),
.chess li:nth-child(8),
.chess li:nth-child(9),
.chess li:nth-child(11) {
	background: SkyBlue;
}

Или интервалами:

/* 1-я строка - нечетные элементы с 1 по 4 */
. chess li:nth-child(-n+4):nth-child(odd) {
	background: SkyBlue;
}

/* 2-я строка - четные элементы с 5 по 8 */
.chess li:nth-child(n+5):nth-child(-n+8):nth-child(even) {
	background: SkyBlue;
}

/* 3-я строка - нечетные элементы с 9 по 12 */
.chess li:nth-child(n+9):nth-child(-n+12):nth-child(odd) {
	background: SkyBlue;
}
 

Для очистки потока элементов с float: left поможет Clearfix.

4

Пример: список брендов

В жизни такая «шахматная доска» хорошо подходит для списка брендов:

<ul>
	<li><a href="#"><img src="https://snipp.ru/img/brand-1.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-2.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-3.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.  ru/img/brand-4.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-5.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-6.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-7.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-8.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-9.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-10.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-11.png" alt=""></a></li>
	<li><a href="#"><img src="https://snipp.ru/img/brand-12.png" alt=""></a></li>
</ul>

. brands {
	width: 500px;   
	margin: 0 auto;    
	padding: 0;
	list-style: none;
}
.brands li {
	float: left;
	width: 20%;  
	height: 80px;
	border: 1px solid #ddd;
	margin: -1px -1px 0 0;
	padding: 

CSS: Как работает псевдо селектор nth-child

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

ul li:nth-child(3n+3) {  
  color: #DA8C12;
}

Что делает селектор nth-child в данном примере? Выбирает каждый третий LI элемент неупорядоченного списка, то-есть 3, 6, 9, 12 и т.д.

Давайте посмотрим как он работает и какие еще есть варианты использования.

Внутри скобок можно написать even и odd. В этом случае будут выбраны все четные или нечетные элементы соответственно. Также, как вы уже видели в предыдущем примере, внутри скобок может находиться выражение. Самое простое выражение, это число. Если вы в скобках напишете число, тогда селектором будет выбрано только элемент с этим поряддковым номером. Вот так можно выбрать пятый элемент:

ul li:nth-child(5) {  
  color: #DA8C12;
}

Теперь давайте вернемся к выражению «3n+3» из первого примера. Как он работает? Представте себе, что «n» представляет из себя любое целое положительное число, включая ноль, а выражение 3n обозначает «3 X n» (три умноженное на n). Раскроем полностью выражение в скобках: «(3 X n) + 3». Подставив все варианты значений «n» мы получим:

(3 x 0) + 3 = 3 = 3-й Элемент
(3 x 1) + 3 = 6 = 6-й Элемент
(3 x 2) + 3 = 9 = 9-й Элемент
и т.д.

Для селектора :nth-child(2n+1) будут выбраны следующие элементы:

(2 x 0) + 1 = 1 = 1-й Элемент
(2 x 1) + 1 = 3 = 3-й Элемент
(2 x 2) + 1 = 5 = 5-й Элемент
и т.д.

Это выражение выводит результат аналогично тому, если в скобках поставить odd. Давайте попробуем упростить выражение из первого примера, что если вместо выражения «3n+3» мы поставим «3n+0», или даже «3n»?

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Элемент
(3 x 2) = 6 = 6th Элемент
(3 x 3) = 9 = 9th Элемент
и т. д.

Таким образом, совпадения теже самые и нет необходимости использовать «+3». Также в скобках можно указывать отрицательные значения «n», а также применять операции вычитания. Например, 4n-1:

(4 x 0) - 1 = -1 = нет совпадений
(4 x 1) - 1 = 3 = 3-й Элемент
(4 x 2) - 1 = 7 = 7-й Элемент

Использование отрицательных значений «n» может показаться странным, так как в конечном результатае оно не даст совпадений, а для того, чтоб совпаделния в выражении были, нужно добавить определенное число, чтоб в сумме выражение снова стало положительным. Но как оказалось эта техника довольно-таки хитрая. Использование выражения «-n+3»  позволяет выбирать первые «n» элементов:

-0 + 3 = 3 = 3-й Элемент
-1 + 3 = 2 = 2-й Элемент
-2 + 3 = 1 = 1-й Элемент
-3 + 3 = 0 = нет совпадений
и т.д.

На сайте Sitepoint опубликовано руководство, в котором составлена полезная табличка, которую мы перепечатаем в данной статье:

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

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

Если вы используете jQuery — вам повезло. Он поддерживает все CSS селекторы, включая :nth-child, который будет работать даже в Интернет эксплоере.

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

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

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

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

Синтаксис

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

Значения ключевых слов

нечет

Представляет элементы, числовая позиция которых в серии братьев и сестер нечетная: 1, 3, 5 и т. Д.

четные

Представляет элементы, числовая позиция которых в серии братьев и сестер четная: 2, 4, 6 и т. Д.

Функциональное обозначение

Представляет элементы в списке, индексы которых соответствуют найденным в пользовательском шаблоне чисел, определяемом An + B , где:
A — целочисленный размер шага,
B — целочисленное смещение,
n — все положительные целые числа, начиная с 0.

Его можно читать как An + B -й элемент списка.

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

: nth-child ( [of ]?) 
, где 
   =  | даже | odd 
  =  #  
 
 где 
   =  [? ] *  
 
 где 
   = [?  * [  *] *]! 
  = '>' | '+' | '~' | ['||' ]  
 
, где 
  <выбор-типа> = <имя-wq> | ? '*' 
  =  |  |  |  
  = ':'  
  = ':'  | ':' <маркер-функции> <любое-значение> ')'  
 
 где 
   = ?  
  = [ | '*']? | 
  =  
  = '. '| '$' | '*']? '=' 
 <модификатор-атрибута> = i | с  
 

Примеры

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

tr: nth-child (нечетное) или tr: nth-child (2n + 1)

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. Д.

tr: nth-child (even) или tr: nth-child (2n)

Представляет четные строки таблицы HTML: 2, 4, 6 и т. Д.

: nth-ребенок (7)

Представляет седьмой элемент.

: nth-ребенок (5n)

Представляет элементы 5 [= 5 × 1], 10 [= 5 × 2], 15 [= 5 × 3], и т. Д. Первый элемент, возвращаемый в результате формулы: 0 [= 5×0], что приводит к несовпадению, поскольку элементы индексируются с 1, тогда как n начинается с 0. Сначала это может показаться странным, но имеет смысл, когда часть B формула > 0 , как в следующем примере.

: n-й ребенок (n + 7)

Представляет седьмой и все следующие элементы: 7 [= 0 + 7], 8 [= 1 + 7], 9 [= 2 + 7], и т. Д.

: nth-ребенок (3n + 4)

Представляет элементы 4 [= (3 × 0) +4], 7 [= (3 × 1) +4], 10 [= (3 × 2) +4], 13 [= (3 × 3) +4], и т. Д.

: nth-ребенок (-n + 3)

Представляет первые три элемента.[= -0 + 3, -1 + 3, -2 + 3]

p: nth-child (n)

Представляет каждый

элемент в группе братьев и сестер. Это выбирает те же элементы, что и простой селектор p (хотя и с более высокой специфичностью).

p: nth-child (1) или p: nth-child (0n + 1)

Представляет каждые

, которые являются первым элементом в группе братьев и сестер. Это то же самое, что и селектор : first-child (и имеет такую ​​же специфичность).

p: nth-child (n + 8): nth-child (-n + 15)

Представляет

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

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

HTML

 
  span: nth-child (2n + 1) , БЕЗ
    & lt; em & gt;  среди дочерних элементов. 
 Выбраны дочерние элементы 1, 3, 5 и 7. 

   Промежуток 1! 
   Диапазон 2 
   Диапазон 3! 
   Диапазон 4 
   Диапазон 5! 
   Диапазон 6 
   Диапазон 7! 





  span: nth-child (2n + 1) , С
    & lt; em & gt;  среди дочерних элементов.
 Выбираются дочерние элементы 1, 5 и 7. 

   3 используется при подсчете, потому что это ребенок, но это не
   выбрано, потому что это не  & lt; span & gt; .  

   Span! 
   Диапазон 
   Это ʻem`. 
   Диапазон 
   Span! 
   Диапазон 
   Span! 
   Диапазон 





  span: nth-of-type (2n + 1) , С
    & lt; em & gt;  среди дочерних элементов.
 Выбираются дочерние элементы 1, 4, 6 и 8. 

   3 не используется при подсчете или выбирается, потому что это  & lt; em & gt; ,
   не  & lt; span & gt; , а  nth-of-type  выбирает только
   дети этого типа.  & lt; em & gt;  полностью пропускается
   поверх и проигнорирован. 

   Span! 
   Диапазон 
   Это ʻem`.
   Span! 
   Диапазон 
   Span! 
   Диапазон 
   Span! 

 

CSS

 html {
  семейство шрифтов: без засечек;
}

пролет
div em {
  отступ: 5 пикселей;
  граница: сплошной зеленый 1px;
  дисплей: встроенный блок;
  нижнее поле: 3 пикселя;
}

. first span: nth-child (2n + 1),
. второй диапазон: n-й ребенок (2n + 1),
.third span: nth-of-type (2n + 1) {
  цвет фона: салатовый;
} 

Результат

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

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android 9024 Chrome для Android 9024 Chrome	Opera для Android	Safari на iOS	Samsung Internet
: nth-child ()	Chrome Полная поддержка 1	Кромка Полная поддержка 12	Firefox Полная поддержка 3. 5	IE Полная поддержка 9	Опера Полная поддержка 9,5 Полная поддержка 9.5 Примечания До Opera 15 Opera не обрабатывала динамически вставляемые элементы для : nth-child () .	Safari Полная поддержка 3.1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Опера Android Полная поддержка 10,1 Полная поддержка 10. 1 Примечания До Opera 15 Opera не обрабатывала динамически вставляемые элементы для : nth-child () .	Safari iOS Полная поддержка 3.1	Samsung Интернет Android Полная поддержка 1.0
Соответствует элементам без родительского элемента	Хром Полная поддержка 57	Кромка Полная поддержка 79	Firefox Полная поддержка 52	IE Никакой поддержки №	Opera Полная поддержка 44	Safari Никакой поддержки №	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 52	Опера Android Полная поддержка 43	Safari iOS Никакой поддержки №	Samsung Internet Android Полная поддержка 7. 0
из синтаксис	Chrome Никакой поддержки № Никакой поддержки № Примечания См. Ошибку 304163.	Край Никакой поддержки № Никакой поддержки № Примечания См. Ошибку 304163.	Firefox Никакой поддержки № Никакой поддержки №

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

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

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

Примечание: Этот псевдокласс по сути совпадает с : nth-child , за исключением того, что он считает элементы назад от конца , а не вперед с начала.

Синтаксис

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

Значения ключевых слов

нечет

Представляет элементы, числовая позиция которых в ряду братьев и сестер нечетная: 1, 3, 5 и т. Д., Считая от конца.

четные

Представляет элементы, числовая позиция которых в серии братьев и сестер четная: 2, 4, 6 и т. Д., считая с конца.

Функциональное обозначение

Представляет элементы, числовая позиция которых в серии братьев и сестер соответствует шаблону An + B для каждого положительного целого или нулевого значения n . Индекс первого элемента, считая с конца, равен 1 . Значения A и B оба должны быть <целое число> с.

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

: nth-last-child ( [of ]?) 
, где 
   =  | даже | odd 
  =  #  
 
 где 
   =  [? ] *  
 
 где 
   = [?  * [  *] *]! 
  = '>' | '+' | '~' | ['||' ]  
 
, где 
  <выбор-типа> = <имя-wq> | ? '*' 
  =  |  |  |  
  = ':'  
  = ':'  | ':' <маркер-функции> <любое-значение> ')'  
 
 где 
   = ?  
  = [ | '*']? | 
  =  
  = '.'| '$' | '*']? '=' 
 <модификатор-атрибута> = i | с  
 

Примеры

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

tr: nth-last-child (нечетное) или tr: nth-last-child (2n + 1)

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. Д., Считая с конца.

tr: nth-last-child (четное) или tr: nth-last-child (2n)

Представляет четные строки таблицы HTML: 2, 4, 6 и т. Д., Считая с конца.

: nth-последний-ребенок (7)

Представляет седьмой элемент, считая от конца.

: nth-последний-ребенок (5n)

Обозначает элементы 5, 10, 15 и т. Д., Считая от конца.

: nth-последний-ребенок (3n + 4)

Обозначает элементы 4, 7, 10, 13 и т. Д., Считая от конца.

: nth-последний-ребенок (-n + 3)

Представляет последние три элемента в группе братьев и сестер.

p: nth-last-child (n) или p: nth-last-child (n + 1)

Представляет каждый

элемент в группе братьев и сестер.Это то же самое, что и простой селектор p . (Поскольку n начинается с нуля, а последний элемент начинается с единицы, n и n + 1 будут выбирать одни и те же элементы.)

p: nth-last-child (1) или p: nth-last-child (0n + 1)

Представляет каждые

, которые являются первым элементом в группе братьев и сестер, считая от конца. Это то же самое, что и селектор : last-child .

Пример таблицы

HTML

 <таблица>
  
    
       Первая строка 
    
    
       Вторая строка 
    
    
       Третья строка 
    
    
       Четвертая строка 
    
    
       Пятая строка 
    
  

 

CSS

 стол {
  граница: 1 пиксель сплошного синего цвета;
}

/ * Выбирает последние три элемента * /
tr: nth-last-child (-n + 3) {
  цвет фона: розовый;
}

/ * Выбирает каждый элемент, начиная со второго до последнего * /
tr: nth-last-child (n + 2) {
цвет синий;
}

/ * Выбираем только последний второй элемент * /
tr: nth-last-child (2) {
font-weight: 600;
}
 

Результат

Количественный запрос

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

HTML

  
 Список из четырех элементов (стилизованный): 
 

  
 Один 
  
 Два 
  
 Три 
  
 Четыре 


 
 Список из двух элементов (без стиля): 
 

  
 Один 
  
 Два 
 

CSS

 / * Если есть как минимум три элемента списка,
   стиль их всех * /
li: nth-последний-ребенок (n + 3),
li: nth-last-child (n + 3) ~ li {
  красный цвет;
} 

Результат

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

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

ребенок: — موزش طراحی وب

() nth-child: یک псевдокласс می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتینان اتنان اتنان اتنان اتنان اساس ترتنان اتنان را می دد تا رزندان یک عنصر را بر اساس ترتینکان اتنان اتنان اتنان اتنان.

ان انتخابگر یک مقدار مثبت به عنوان رگومان مپذی رید و بر اساس آن عدد, عنصر مربوطه را متنا به عنوان مثال در زیر ارمین آیتم یک لیست انتخاب و استایل دهی ده است:

 
li: nth-child (4) {
  цвет фона: # 4A90E2;
}
 
 

مچنین می توان آیتم های فرد (нечетный) و ا زوج (четный) را از بین فرزندان یک عنصر انتخاب :رد:

 
li: nth-child (odd) {
  / * عناصر رد مثل اول, سوم, نجم و الی آخر انتخاب خواند شد * /
}

li: nth-child (even) {
  / * عناصر وج مثل دوم, ارم, م و الی آخر انتخاب واند شد * /
}
 
 

استفاده از این انتخابگر کاربرد زیادی در استایل دهی جداول دارد به عنوان مثال می خواهیم ردیف های زوج یک جدول, رنگ پس زمینه مخصوص به خود را داشته باشند:

 
tr: nth-child (even) {
  цвет фона: #eee;
}
 
 

ان انتخابگر همچنین می تواند یک فرمول به عنوان آرگومان بپذیرد.به عنوان مثال : nth-child (an + b) د در آن a و b اعداد صحیح مثبتی هستند که ما انتخاب می نیم. به عنوان مثال : nth-child (3n + 1) وقتی n = 0 ست داریم: 3 * 0 + 1 = 1 عن در اولین حرکت الین رزدون. و سپس n = 1 می شود و رزند چهارم انتخاب می شود و الی آخر.

از آنجایی که کنار آمدن با حساب کردن فرمولی که این انتخابگر می پذیرد می تواند گاهی گیج کننده باشد و از طرفی اگر نتیجه فرمول به صورت نمایشی قابل بررسی باشد به سرعت کار بیشتر کمک می کند, ابزارهایی برای این امر ساخته شده اند که در انجا دو تا از بهترین نها را معرفی می نیم:

Количество экземпляров псевдокласса Количество баллов:

 
tr: nth-child (нечетное): hover {
  / * здесь стили * /
}

span: nth-child (2n + 4) :: after {
  / * здесь стили * /
}
 
 

دمویی در ر برای بررسی بیشتر ماده ده است:

См. Pen nth-child () от Mojtaba Seyedi (@seyedi) на CodePen.

مارش داشته باشید که در مان مارش عناصر, تمام عناصر آن سطر شمارش می شوند و نه مان نوبی در مثال زیر فرزند اول سطر, عنصر h3 می باشد پس انتخابگر р: п-й ребенок (1) موجب انتخاب اولین عنصر р نمی شود بلکه برای انتخاب اولین پاراگراف باید نوشت: р: п-й ребенок (2 )

 

 
 رزند اول 
 
 رزند دوم 
 
 رزند سوم 
 
.... 
 
 .... 

 
 

برای اینکه بتوان شمارش رزندان را فقط در نوع اص عنصر انجام داد از انتخابگر () nth-of-type: اسیفاتدم.

تیبانی مرورگرها

() nth-child: در مرورگرهای روم, ایرفاکس, اپرا +9,5 و اینترنت اکسپلورر +9 و مچنین در اندروید для iOS ارا.