Псевдоклассы 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, 3, 5, 7...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

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

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

Поиск файлов в PHP
Для поиска файлов на сервере хорошо подходит функция glob(), которая возвращает список файлов по заданной маске, например...
13407
-1
Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
546392
+45
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
53690
+4
Шахматное поле на CSS
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().
20294
0
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
7992
+10
Скан-коды клавиш клавиатуры (scan codes)
Скан-код — числовой код, присвоенный каждой клавише в IBM-совместимых компьютерах, с помощью которого драйвер...
3964
+1