Псевдокласс :nth-child нужен для формирования красивого маркированного списка. Его возможности распространяются не только на тег <ul> (список), но и на другие теги.
Синтаксис :nth-child
элемент:nth-child (VALUE) {
...
описание стиля
...
};
Где VALUE может принимать следующие выражения:
odd - нечетные номера элементов
even - четные номера элементов
число - номер, который нужно выделить относительно своего родителя
выражение - вида (an+b), где a и b целые числа, такое задание позволяет задать практически любую последовательность
Рассмотрим пример.
Пример №1. Красивая таблица
Самым популярным и наглядным примером является таблица. Сделаем так, чтобы первая строка была заглавной (выделим ее другим фоном), а все нечетные номера строк будут иметь другой цвет (более серый).
[html]
<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>
[/html]
Код
<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
Важно отметить, что на конечный результат оказывает влияние в какой последовательности будут написаны tr:nth-child(1) и tr:nth-child(2n+1). Если поменять их местами, то первая строка будет выделена серым цветом, а не черным, как предполагалось.
Примечание 2
Вместо аргумента (2n+1) в tr:nth-child(2n+1) можно было написать значение odd.
