Псевдокласс nth-child - n-ный потомок родителя
Псевдокласс nth-child выбирает элемент,
который является n-ным потомком родителя.
Синтаксис
селектор:nth-child(число | odd | even | выражение) {
}
Значения
| Значение | Описание |
|---|---|
| число |
Положительное число начиная с 1.
Задает номер элемента, к которому мы хотим
обратиться. Нумерация элементов начинается с 1.
|
odd |
Нечетные элементы. |
even |
Четные элементы. |
| выражение |
Можно составлять специальные выражения с буквой n,
которая обозначает все целые числа от нуля (не от единицы)
до бесконечности. Так, 2n - значит все четные
числа (начиная со второго).
Как это понять? Подставляем в n последовательно
числа от 0 и так далее: если n = 0, то 2n даст 0 -
такого элемента нет (нумерация элементов с 1),
если n = 1, то 2n даст 2 - второй элемент, если n = 2,
2n дает 4 - четвертый элемент. Если написать 3n - это
будет каждый третий элемент (начиная с третьего), и так далее.
|
Пример
В данном примере мы сделаем красного цвета
тот li, который является 4-тым потомком
своего родителя:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Пример
Сейчас красными сделаем все четные li:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Пример
Сейчас красными сделаем все нечетные li:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Пример
Сейчас красными сделаем каждую третью
li (начиная с третьей):
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Пример
В селекторе можно указать диапазон элементов.
Допустим, у вас есть список из 20
элементов и нужно выбрать элементы с 7
по 14 включительно. Это можно сделать
вот так:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
: