Псевдокласс :nth-child

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

• Свойство display

• Свойство transform

• CSS border

• CSS background

• CSS transition

• Свойство overflow

• Свойство box-shadow

• Медиа запросы (@)


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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.