Как работает nth-child

Крис Койер 21 ноября 2011

Существует такой селектор, точнее псевдокласс, называемый :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 и приведенного алгебраического уравнения. Подумайте об 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 элементов, например так: -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 12 8 8 1
3 7 13 16 12 13
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, там вы сможете найти код для наиболее распространенных случаев.

Перевод оригинальной статьи «How nth-child Works» Криса Койера (Chris Coyier), опубликованной на сайте «CSS-Tricks».

Теги: ,

Комментарии +

  1. Anton Diaz 21 ноября 2011 в 17:51

    Существует такой селектор, точнее псевдоселектор, называемый :nth-child.

    Наверное, всё-таки псевдокласс, а не псевдоселектор?

  2. Вадим Макеев 21 ноября 2011 в 17:59

    Согласно спецификации, такого понятия, не существует. Это скорее авторская придумка, всё же несколько распространившаяся. Но для понятности исправил.

  3. Иван 21 ноября 2011 в 21:19

    0 - не натуральное число, в данном предложении речь идёт о целых числах

  4. Вадим Макеев 21 ноября 2011 в 21:28

    Иван, спасибо, исправили.

  5. Seva 24 ноября 2011 в 12:38

    Я там вопросик написал в конце в коментариях https://web-standards.ru/static/articles/avoiding-html5-mistakes/#comments

  6. bolk 25 ноября 2011 в 8:48

    > Как видно из первого примера, :nth-child также принимает в качестве параметра уравнения.
    Это не уравнение, это выражение.

  7. bolk 25 ноября 2011 в 8:50

    Потом дополните уравнение. Так 3n это 3xn, а все уравнение вместе это (3xn)+3.

    Тут наверное «3×n» и «(3×n)+3» должно быть.

  8. Вадим Макеев 25 ноября 2011 в 14:09

    Bolk, всё исправили, спасибо.

  9. Seva 25 ноября 2011 в 16:19

    Вадим Макеев

    А можете посоветовать какойто форум, или место где можно обсудить вопросы семантики, я сам сторонник семантически верного кода но есть много неточностей и неоднозначных вещей.

  10. Игорь 8 апреля 2015 в 14:20

    "Согласно спецификации, такого понятия, не существует."
    А сейчас по вашей ссылке в спецификации уже псевдоклассы)

Перейти к началу