Css even: CSS: even and odd rules

CSS: even and odd rules

CSS: even and odd rules

Languages

See also the index of all tips.

Even and odd rules

One way to improve the readability of large tables is to color alternating rows. For example, the table below has a light gray background for the even rows and white for the odd ones. The rules for that are extremely simple:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month	’94	’95	’96	’97	’98	’99	’00	’01	’02
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords ‘even’ and ‘odd’ are just convenient shorthands. For example, for a long list you could do this:

li:nth-child(5n+3) {font-weight: bold}

This says that every 5th list item is bold, starting with the 3rd one. In other words, the items numbered 3, 8, 13, 18, 23, etc., will be bold.

Even and odd columns

The same works for table columns, too, but then there has to be an element in the document that corresponds to the column. HTML provides COL for that. The table has to start with one COL for every column:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>'94<th>'95<th>'96...

(COL can be used for other things than style, but in this case all we need is that the COL elements are present.) The following rules give the first column a yellow background, and then every second column starting from column 3 a gray one:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Month	’94	’95	’96	’97	’98	’99	’00	’01	’02
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

The background of rows (TR) is drawn in front of the background of columns (COL), so if you want to be sure that the background of the columns is visible, you should not set a background on the rows.

Bert Bos, style activity lead
Copyright © 1994–2021 W3C^® Privacy policy

Created 6 Febrary 2003;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

• Azərbaycan
• Български
• Deutsch
• Ελληνικά
• English
• Español
• Français
• Hrvatski
• Bahasa Indonesia
• Norsk
• Nederlands
• Polski
• Português
• Português brasileiro
• Русский
• ไทย
• Tagalog
• Українська
• Tiếng Việt
• 简体中文
• 繁體中文

About the translations

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

1. Кратко
2. Пример
3. Как пишется
4. Подсказки

Кратко

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

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

Пример

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

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

<ul>  <li>Изумрудно зелёный</li>  <li>Лаймовый</li>  <li>Лазурный</li>  <li>Лазурный</li>  <li>Лазурный</li>  <li>Розовый щербет</li>  <li>Умеренный оранжевый</li></ul>
           <ul>
  <li>Изумрудно зелёный</li>
  <li>Лаймовый</li>
  <li>Лазурный</li>
  <li>Лазурный</li>
  <li>Лазурный</li>
  <li>Розовый щербет</li>
  <li>Умеренный оранжевый</li>
</ul>

У всех пунктов списка будет синий фон:

.list-item {  background-color: #2E9AFF;}
          .list-item {
  background-color: #2E9AFF;
}

У первого пункта списка (первого дочернего элемента) будет тёмно-зелёный фон:

.
  list-item:first-child {  background-color: #286C2D;}
          .list-item:first-child {
  background-color: #286C2D;
}

У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:

.list-item:last-child {  background-color: #FF8630;}
          .list-item:last-child {
  background-color: #FF8630;
}

У второго пункта списка будет зелёный фон:

.list-item:nth-child(2) {  background-color: #41E847;}
          .list-item:nth-child(2) {
  background-color: #41E847;
}

У предпоследнего пункта списка будет розовый фон:

.list-item:nth-last-child(2) {  background-color: #F498AD;}
           .list-item:nth-last-child(2) {
  background-color: #F498AD;
}

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

Как пишется

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

Есть три суперпростых по своей логике работы псевдокласса из этого набора:

• :only-child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: :first-child:last-child или :nth-child(1):nth-last-child(1), но зачем так сложно, если можно проще?
• :first-child — выбирает первый дочерний элемент в родителе.
• :last-child — выбирает последний дочерний элемент в родителе.

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

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

• :nth-child(odd) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
• :nth-child(even) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

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

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth-child(3n). Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.

Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth-child(6n+10).

Псевдокласс :nth-last-child работает абсолютно аналогично, только счёт ведётся с конца.

Подсказки

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

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

💡 Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:active

alt + ←

→

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

alt + →

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

CSS селекторы

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

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

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

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
:nth-child()	4. 0	3.5	9.6	3.2	9.0	12.0

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 селекторы

html — Как выбрать нечетные и четные элементы с помощью CSS?

Спросил 6 лет, 8 месяцев назад

Изменено 15 дней назад

Просмотрено 42k раз

Скажем, у меня есть несколько div:

 

<дел>
<дел>
<дел>
 

Если эти поля должны быть разных цветов, мне нужно создать некоторый CSS, который в основном делает следующее:

 .box-(нечетное число) {
    цвет:#000;
}
.box-(четное число) {
    цвет:#fff;
}
 

Очевидно, я знаю, что приведенный выше синтаксис неверен. Может ли кто-нибудь указать мне в правильном направлении?

Спасибо

• HTML
• CSS

Вы можете использовать псевдо-класс NTH-of-Type . (странный) { цвет фона:#000; } .box: n-й тип (четный) { цвет фона:#fff; } .коробка { отображение: встроенный блок; ширина: 100 пикселей; высота: 100 пикселей; граница: 1px сплошная #f00; }

 <дел>
<дел>
<дел>
 

Вы можете сделать это, используя nth-child() с четными и нечетными правилами .

 .box: n-й ребенок (нечетный) {
    фон: синий;
}
.box: n-й ребенок (четный) {
    фон: зеленый;
} 

 
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
 

Или вы можете сделать это, где :nth-child(2n) представляет четных и :nth-child(2n+1) представляет нечетное

 .box:nth-child(2n ) {
    фон: красный;
}
.box: n-й ребенок (2n + 1) {
    фон: желтый;
} 

 
Lorem ipsum dolor sit amet. 
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
 9="box-"]:nth-child(четный) {
    цвет:#fff;
}
 

Пример: https://jsfiddle.net/8tkcuuwm/

См. этот jsfiddle:

HTML

 
Hello World
Привет, мир
Привет, мир
Привет, мир
 

CSS

 .box:nth-child(нечетный) {
    цвет фона: #336699;
}
.box: n-й ребенок (четный) {
  цвет фона: #222;
}
 

Краткое пояснение:

Мы добавили к ящикам еще один класс, названный box . Это значит, что мы можем ссылаться на каждый элемент этого типа. (Мой совет: используйте идентификаторы для коробок-1 и коробок-2, так как они кажутся уникальными). Использование псевдокласса nth-child в сочетании с нечетным или четным повлияет на каждый (как вы можете предположить) нечетный или четный элемент.

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

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