Псевдоклассы 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
16.03.2020
7572
Предыдущая запись Сортировка таблиц в PHP

Комментарии

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

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

Таблица символов ASCII
Список из 256 символов и их коды в ASCII.
225102
+22
Поиск файлов в PHP
Для поиска файлов на сервере хорошо подходит функция glob(), которая возвращает список файлов по заданной маске, например...
5451
+1
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
12088
+4
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
3496
+6
Календарь на PHP
PHP-класс для вывода календаря на месяц, год или любой другой интервал с возможностью выделить отдельные даты и вывести к ним подсказки.
1678
0
Как сделать полосатую таблицу на HTML, CSS, JS, PHP
Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».
9743
0