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

Псевдокласс :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>
HTML
1

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

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

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

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

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

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

Пример группировки псевдоклассов и выбор элементов 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;
}
CSS
4

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

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

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

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

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

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

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

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

Элементы 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;
}
CSS
9
ul li:nth-child(-n+10) {
	background: skyblue;
}
CSS
10

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

ul li:nth-child(n+3):nth-child(-n+15) {
	background: skyblue;
}
CSS
11
ul li:nth-child(n+11) {
	background: skyblue;
}
CSS
12
ul li:nth-last-child(n+2) {
	background: skyblue;
}
CSS
13
ul li:nth-last-child(1) {
	background: skyblue;
}
CSS
14
ul li:nth-last-child(-n+3) {
	background: skyblue;
}
CSS
16.03.2020, обновлено 20.04.2022
63811

Комментарии 2

Рафаэль Каримов Рафаэль Каримов
18 февраля 2023 в 21:09
Как расположить два через один?

, чтобы добавить комментарий.

Другие публикации

Поиск файлов в PHP
Для поиска файлов на сервере хорошо подходит функция glob(), которая возвращает список файлов по заданной маске, например...
24297
+1
Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
948772
+59
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
78261
+6
Шахматное поле на CSS
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().
30938
+1
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
15633
+12
Скан-коды клавиш клавиатуры (scan codes)
Скан-код — числовой код, присвоенный каждой клавише в IBM-совместимых компьютерах, с помощью которого драйвер...
26505
+4