Псевдокласс :nth-child | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-child-pseudo |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
элемент:nth-child(odd | even | <число> | <выражение>) {…}
Значения
- odd
- Все нечетные номера элементов.
- even
- Все четные номера элементов.
- число
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
- выражение
- Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Значение | Номера элементов | Описание |
|---|---|---|
| 1 | 1 | Первый элемент, является синонимом псевдокласса :first-child. |
| 5 | 5 | Пятый элемент. |
| 2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все четные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-child</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-spacing: 0; /* Расстояние между ячейками */
}
tr:nth-child(2n) {
background: #f0f0f0; /* Цвет фона */
}
tr:nth-child(1) {
background: #666; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<table border="1">
<tr>
<td> </td><td>2134</td><td>2135</td>
<td>2136</td><td>2137</td><td>2138</td>
</tr>
<tr>
<td>Нефть</td><td>16</td><td>34</td>
<td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>4</td><td>69</td>
<td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>7</td><td>73</td>
<td>79</td><td>34</td><td>86</td>
</tr>
<tr>
<td>Камни</td><td>23</td><td>34</td>
<td>88</td><td>53</td><td>103</td>
</tr>
</table>
</body>
</html>В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис.
1).
Рис. 1. Применение псевдокласса :nth-child к строкам таблицы
Псевдоклассы
CSS по теме
- Псевдокласс :nth-child
Статьи по теме
- Список с русскими буквами
Рецепты CSS
Как работает nth-child — Веб-стандарты
Существует такой селектор, точнее псевдокласс, называемый :nth-child. Вот пример его использования:
ul li:nth-child(3n+3) {
color: #cccccc;
}
Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью :nth-child.
Всё зависит от того, что находится между скобками. Селектор :nth-child принимает два ключевых слова: even и odd. Тут всё просто: even выбирает чётные элементы, такие как 2-й, 4-й, 6-й и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.
д.
Как видно из первого примера, :nth-child также принимает в качестве параметра выражения. В том числе и простейшие уравнения, иначе говоря, просто числа. Если поставить их в скобки, будет выбран только один элемент с соответствующим номером. Например, вот как выбрать только пятый элемент:
ul li:nth-child(5) {
color: #cccccc;
}
Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n, как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n, а все уравнение вместе это (3×n)+3. Теперь, подставляя вместо n числа больше или равные нулю, мы получим:
- (3 × 0) + 3 = 3 = 3-й элемент
- (3 × 1) + 3 = 6 = 6-й элемент
- (3 × 2) + 3 = 9 = 9-й элемент и т.д.
А как насчёт :nth-child(2n+1)?
- (2 × 0) + 1 = 1 = 1-й элемент
- (2 × 1) + 1 = 3 = 3-й элемент
- (2 × 2) + 1 = 5 = 5-й элемент и т. д.
д.Так, стоп! Это ведь то же самое, что и odd. Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n?
- (3 × 0) = 0 = ничего нет
- (3 × 1) = 3 = 3-й элемент
- (3 × 2) = 6 = 6-й элемент
- (3 × 3) = 9 = 9-й элемент и т.д.
Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3. Мы можем использовать и отрицательные значения n, с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:
- (4 × 0) – 1 = –1 = ничего нет
- (4 × 1) – 1 = 3 = 3-й элемент
- (4 × 2) – 1 = 7 = 7-й элемент и т.д.
Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые -n+3:
- –0 + 3 = 3 = 3-й элемент
- –1 + 3 = 2 = 2-й элемент
- –2 + 3 = 1 = 1-й элемент
- –3 + 3 = 0 = ничего нет и т. д.
д.На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 1 | 8 | 8 | 1 |
| 3 | 7 | 1 | 1 | 1 | 1 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Поддержка браузерамиСкопировать ссылку
Селектор :nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы.
Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.
Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child, даже в Internet Explorer.
Всё равно неясно?Скопировать ссылку
Я не большой поклонник фразы я лучше воспринимаю визуальную информацию. И вы, конечно, тоже. Но примеры являются чрезвычайно полезными именно в таких ситуациях. Чтобы облегчить понимание, я сделал небольшую тестовую страничку. На ней вы сможете написать свои уравнения и ниже увидеть то, что попадет в выборку.
Также загляните на страничку полезных рецептов :nth-child, там вы сможете найти код для наиболее распространенных случаев.
:nth-child() — CSS: Каскадные таблицы стилей
Псевдокласс CSS :nth-child() сопоставляет элементы на основе их положения в группе братьев и сестер.
Обратите внимание, что в синтаксисе element:nth-child() количество дочерних элементов включает дочерние элементы любого типа; но это считается совпадением, только если элемент в этой дочерней позиции имеет указанный тип элемента.
:nth-child() принимает один аргумент, описывающий шаблон для сопоставления индексов элементов в списке братьев и сестер. Индексы элементов отсчитываются от 1.
:nth-child([ из ]? )
Значения ключевых слов
-
нечетные Представляет элементы, чье числовое положение в ряду братьев и сестер является нечетным: 1, 3, 5 и т. д.
-
четный Представляет элементы, чье числовое положение в ряду братьев и сестер четное: 2, 4, 6 и т. д.
Функциональное обозначение
-
Представляет элементы в списке, индексы которых соответствуют найденным в пользовательском шаблоне чисел, определяемом
An+B, где:-
A— целочисленный размер шага, -
B— целочисленное смещение, -
n— все неотрицательные целые числа, начиная с 0.
Может быть прочитан как
An+B-й элемент списка.-
Примеры селекторов
-
tr:n-й ребенок (нечетный)илиtr:n-й ребенок (2n+1) Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. д.
-
tr:nth-child(четный)илиtr:nth-child(2n) Представляет четные строки таблицы HTML: 2, 4, 6 и т. д.
-
:n-й ребенок(7) Представляет седьмой элемент.
-
:n-й ребенок(5n) Представляет элементы 5 [=5×1], 10 [=5×2], 15 [=5×3], и т. д. Первый элемент, который будет возвращен в результате формулы 0 [=5×0], что приводит к несоответствию, поскольку элементы индексируются с 1, тогда как
Bчасть формула>0, как в следующем примере.-
:n-й ребенок(n+7) Представляет седьмой и все следующие элементы: 7 [=0+7], 8 [=1+7], 9 [=2+7], и т. д.
-
:n-й ребенок(3n+4) Представляет элементы 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [= (3×3)+4], и т. д.
-
:n-й ребенок(-n+3) Представляет первые три элемента. [=-0+3, -1+3, -2+3]
-
p:n-й ребенок(n) Представляет каждый
p(хотя и с более высокой специфичностью).-
p:nth-child(1)илиp:nth-child(0n+1) Представляет каждый
: селектор first-child(и имеет ту же специфичность).-
p:n-й потомок(n+8):n-й-потомок(-n+15) Представляет с восьмого по пятнадцатый
Сначала это может показаться странным, но это имеет больше смысла, когда 
Подробный пример
HTML
span:nth-child(2n+1), БЕЗ<em">>среди дочерние элементы.Выбраны дети 1, 3, 5 и 7.
<дел> Диапазон 1! Диапазон 2 Размах 3! Диапазон 4 Размах 5! Диапазон 6 Размах 7!
span:nth-child(2n+1), С <em">> среди
дочерние элементы.
<р>
Выбраны дети 1, 5 и 7.3 используется в подсчете, потому что это дочерний элемент, но он не выбран, потому что это не
<span">>.
<дел>
Размах!
Размах
Это `em`.
Размах
Размах!
Размах
Размах!
Размах
first span:nth-child(2n + 1),
.second span: n-й ребенок (2n + 1),
.therth span:nth-of-type(2n + 1) {
цвет фона: салатовый;
}
CSS 