Как работает CSS-селектор nth-child

В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:

ul li:nth-child(3n+3) { color: #ccc; }

Вышеприведённый 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 : #ccc; }

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

(3 x 0) + 3 = 3 = 3-ий элемент (3 x 1) + 3 = 6 = 6-ой элемент (3 x 2) + 3 = 9 = 9-ый элемент и т.д.

Теперь попробуем следующее выражение: nth-child(2n+1):

(2 x 0) + 1 = 1 = 1-ый элемент (2 x 1) + 1 = 3 = 3-ий элемент (2 x 2) + 1 = 5 = 5-ый элемент и т.д.

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

(3 x 0) + 0 = 0 = нет соответствия (3 x 1) + 0 = 3 = 3-ий элемент (3 x 2) + 0 = 6 = 6-ой элемент и т.д.

Как видите, результат тот же, но не надо писать "+3". Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

(4 x 0) - 1 = -1 = нет соответствия (4 x 1) - 1 = 3 = 3-ий элемент (4 x 2) - 1 = 7 = 7-ой элемент и т.д.

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с "-n+3":

-0 + 3 = 3 = 3ий элемент -1 + 3 = 2 = 2-ой элемент -2 + 3 = 1 = 1-ый элемент -3 + 3 = 0 = нет соответствия

Кроссбраузерность

nth-child является одним из тех самых несчастных аттрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат - это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

Ну и на последок

Вы можете поиграть с различными выражениями для селектора на страничке с примером.

Опубликовано: 21.02.2010 Просмотров 64882 Ссылка на оригинал Tweet it!
16 comments  

Fodoj

2010.02.22 13:09

 О___О Спасибо большое, первый раз слышу об этом псевдо-селекторе. Пошёл записывать в свой блокнот для подобных вещей =)
 

basilkot

2010.02.22 13:42

  • спасибо и вам, рад, что мои труды не зря :)

Kuper

2010.02.22 16:25

 Здорово! Спасибо!!
 

Сергей

2010.03.02 09:50

 Спасибо!
 

Евгений

2010.03.03 16:24

 Спасибо.
 

lejjna

2010.08.11 20:12

 Спасибо, очень доступно написано)
 

art

2010.08.17 12:42

 че то пытаюсь в ie с jquery заставить все это работать - не выходит |:
 

basilkot

2010.08.17 13:13

  • и не работает пример с оф сайта jQuery?

    http://api.jquery.com/nth-child-selector/

    я проверил в IE6/7/8, всё в порядке.

Юрий

2010.10.07 08:21

 Спасибо, как раз то, что искал.

з.ы. кстати опечаточка, не столь существенная..
ul liLnth-child(5) {
color : #ccc;
}

вместо двоеточия промахнулся кнопочкой на L ;)

Успехов!
 

basilkot

2010.10.07 08:27

  • спасибо)

Васек

2011.04.11 18:13

 Использовать nth-child через css не советую. Т.к. все версии IE его не понимают. Я если использую, то только через jQuery. А для теuj процента юзеров у кого выключен JS. То между <noscript> пишу css
 

Alex

2012.06.03 10:29

 за пример с отрицательным N огромное спасибо
 

Кирилл

2012.10.24 20:03

 Здравствуйте!
А можно ли как то выбрать последние, скажем, три элемента списка?
 

Кирилл

2012.10.24 20:09

 Извиняюсь, вопрос снят, нашел сам через 2 минуты))
.labels a:nth-last-child(-n+3) {
border: 1px solid red;
}
 

Катерина

2012.12.28 11:00

 Есть вот такая конструкция:
<p>text</p>
<p>text</p>
<hr />
<p>text</p>
<p>text</p>
<hr />
<p>text</p>
<p>text</p>
Прописываю: p:nth-child(odd){какой то стиль}
то применяется к 1, 3,4 элементам. Я так понимаю, что это из-за <hr />. Но как исправить эту ситуацию?
 

basilkot

2012.12.28 11:06

  • как вариант можно написаьт такое правило:

    p:nth-child(3n+1){какой-то стиль}​

Катерина

2012.12.28 11:12

 Пробовала, тогда стиль ни к чему не применяется :)
 

basilkot

2012.12.28 11:13

  • http://jsfiddle.net/VmtRX/

Катерина

2012.12.28 11:21

 Спасибо!
Странно почему у меня не работает, начну с проверки - закрыты ли все теги.
 

Катерина

2012.12.28 11:56

 Спасибо за сервис, нашла ошибку: перед всей этой конструкции был <hr />, а перед ним <br /> . Как ни странно после его удаления всё ЗАРАБОТАЛО! Какое счастье! Спасибо автору!
 

Олег

2013.08.07 18:47

 спасибо большое за статью, т.к. везде такие пояснение непонятные по поводу этого псевдо-класса, что на наших популярных сайтах что на зарубежных, я только начинаю все это постигать и думал столкнулся с чем-то сложным а тут оказывается все так просто.
 

Оставить после себя комментарий

user

2016.10.07

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!