Псевдокласс :nth-child (:nth-of-type). Примеры. Маркированный список в html

Псевдокласс :nth-child нужен для формирования красивого маркированного списка. Его возможности распространяются не только на тег <ul> (список), но и на другие теги.

Синтаксис :nth-child

элемент:nth-child (VALUE) {
...
описание стиля
...
};

Где VALUE может принимать следующие выражения:

odd - нечетные номера элементов
even - четные номера элементов
число - номер, который нужно выделить относительно своего родителя
выражение - вида (an+b), где a и b целые числа, такое задание позволяет задать практически любую последовательность

Рассмотрим пример.

Пример №1. Красивая таблица

Самым популярным и наглядным примером является таблица. Сделаем так, чтобы первая строка была заглавной (выделим ее другим фоном), а все нечетные номера строк будут иметь другой цвет (более серый).

<html>
<head>
<style>
	table.primer1 { 
	width: 90%; 
	border-spacing: 5px; 
	border-collapse: collapse;
	}
	table.primer1 tr:nth-child(2n+1) {
	background: #ccc; 
	} 
	table.primer1 tr:nth-child(1) {
	background: #000; 
	color: #fff; 
	}
</style>
</head>
<body>
	<table class="primer1" border="1">
		<tr>
			<td>Название</td>
			<td>Столбец 1</td>
			<td>Столбец 2</td>
			<td>Столбец 3</td>
		</tr>
		<tr>
			<td>Строка 1</td>
			<td>Элемент 1,1</td>
			<td>Элемент 1,2</td>
			<td>Элемент 1,3</td>
		</tr>
		<tr>
			<td>Строка 2</td>
			<td>Элемент 2,1</td>
			<td>Элемент 2,2</td>
			<td>Элемент 2,3</td>
		</tr>
		<tr>
			<td>Строка 3</td>
			<td>Элемент 3,1</td>
			<td>Элемент 3,2</td>
			<td>Элемент 3,3</td>
		</tr>
	...
	</table>
</body>
</html>

На странице преобразуется в следующее

Название	Столбец 1	Столбец 2	Столбец 3
Строка 1	Элемент 1,1	Элемент 1,2	Элемент 1,3
Строка 2	Элемент 2,1	Элемент 2,2	Элемент 2,3
Строка 3	Элемент 3,1	Элемент 3,2	Элемент 3,3
Строка 4	Элемент 4,1	Элемент 4,2	Элемент 4,3
Строка 5	Элемент 5,1	Элемент 5,2	Элемент 5,3
Строка 6	Элемент 6,1	Элемент 6,2	Элемент 6,3
Строка 7	Элемент 7,1	Элемент 7,2	Элемент 7,3

Примечание 1
Важно отметить, что на конечный результат оказывает влияние в какой последовательности будут написаны tr:nth-child(1) и tr:nth-child(2n+1). Если поменять их местами, то первая строка будет выделена серым цветом, а не черным, как предполагалось.

Примечание 2
Вместо аргумента (2n+1) в tr:nth-child(2n+1) можно было написать значение odd.

Пример №2. Последовательность одинаковых ячеек

Все строки начиная с 5ой строки будут выделены серым фоном. Для этого нужно написать запись nth-child(n+5).

<html>
<head>
<style>
	table.primer2 { 
	width: 90%; 
	border-spacing: 5px; 
	border-collapse: collapse;
	}
	table.primer2 tr:nth-child(n+5) {
	background: #ccc; 
	} 
	table.primer2 tr:nth-child(1) {
	background: #000; 
	color: #fff; 
	}
</style>
</head>
<body>
	<table class="primer2" border="1">
		<tr>
			<td>Название</td>
			<td>Столбец 1</td>
			<td>Столбец 2</td>
			<td>Столбец 3</td>
		</tr>
		<tr>
			<td>Строка 1</td>
			<td>Элемент 1,1</td>
			<td>Элемент 1,2</td>
			<td>Элемент 1,3</td>
		</tr>
		<tr>
			<td>Строка 2</td>
			<td>Элемент 2,1</td>
			<td>Элемент 2,2</td>
			<td>Элемент 2,3</td>
		</tr>
		<tr>
			<td>Строка 3</td>
			<td>Элемент 3,1</td>
			<td>Элемент 3,2</td>
			<td>Элемент 3,3</td>
		</tr>
	...
	</table>
</body>
</html>

На странице преобразуется в следующее

Название	Столбец 1	Столбец 2	Столбец 3
Строка 1	Элемент 1,1	Элемент 1,2	Элемент 1,3
Строка 2	Элемент 2,1	Элемент 2,2	Элемент 2,3
Строка 3	Элемент 3,1	Элемент 3,2	Элемент 3,3
Строка 4	Элемент 4,1	Элемент 4,2	Элемент 4,3
Строка 5	Элемент 5,1	Элемент 5,2	Элемент 5,3
Строка 6	Элемент 6,1	Элемент 6,2	Элемент 6,3
Строка 7	Элемент 7,1	Элемент 7,2	Элемент 7,3

Примечание
Если нужно задать первые элементы, то нужно написать nth-child(-n+5), т.е. n с минусом.

Разница nth-child и nth-of-type

Псевдокласс nth-of-type делает практически то же самое, что и nth-child, то есть если бы мы в рассматриваемых примерах выше писали его, то ничего бы не изменилось.

Синтаксис nth-of-type такой же:

элемент:nth-of-type (VALUE) {
...
описание стиля
...
};

В чем же разница?

Псевдокласс nth-of-type ведет отчет количества элементов конкретного типа. Например

<style>
	p:nth-child(2) { // первый вариант
	background: #ccc; 
	}
	p:nth-of-type(2) {  // второй вариант
	background: #777; 
	}
</style>

<h1></h1>
<p>Первый Абзац</p>
<p>Второй Абзац</p>

В случае первого варианта, будет выделен цветом Первый абзац.

Во втором варианте все более предсказуемо, будет выделен цветом второй абзац. Все дело в подсчете. nth-of-type считает количество тега <p>

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

:first-of-type
:last-of-type
:nth-last-of-type
:only-of-type

← Перейти в каталог CSS уроков