Селекторы nth-xxx

Селектор :nth-child — очень удобная штука, позволяющая делать всякие штуки: полосатые таблицы и необычные разноцветные дизайны. И всё это без необходимости задавать дополнительные классы или как-то менять разметку.

:nth-child(n)

В круглых скобках задаётся размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперёд или назад: (3n+1) — найдёт каждый третий и сделает один шаг вперёд, а (3n-2) — два шага назад от найденного. Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

nth-child в своём цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Можно выбрать третий дочерний элемент. Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчёт ведётся не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2).


li:nth-child(3) { color: red; }

Можно выбрать каждый четвёртый элемент списка, просто написав li:nth-child(4n).

Есть готовые параметры odd (чётные элементы) и even (нечётные элементы)

Выбираем каждый чётный элемент списка.

  1. Барсик
  2. Мурзик
  3. Рыжик
  4. Васька

:nth-last-child(n)

Что делать, если у вас огромный список элементов, а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child. Этот метод почти идентичен приведённому выше, однако отсчёт ведётся с конца.


li:nth-last-child(2) { color: red; }

:nth-of-type(n)

Позволяет выбрать не дочерний элемент, а элемент определённого типа. Представьте себе, что на странице пять неупорядоченных списков. Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.


ul:nth-of-type(3) { border: 1px solid black; }

:nth-last-of-type(n)

Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.


ul:nth-last-of-type(3) { border: 1px solid black; }

Дополнительное чтение

Nth-child и nth-of-type

:nth Tester

Реклама