Селектор :nth-child — очень удобная штука, позволяющая делать всякие штуки: полосатые таблицы и необычные разноцветные дизайны. И всё это без необходимости задавать дополнительные классы или как-то менять разметку.
В круглых скобках задаётся размер цикла: например (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 (нечётные элементы)
Выбираем каждый чётный элемент списка.
Что делать, если у вас огромный список элементов, а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child. Этот метод почти идентичен приведённому выше, однако отсчёт ведётся с конца.
li:nth-last-child(2) { color: red; }
Позволяет выбрать не дочерний элемент, а элемент определённого типа. Представьте себе, что на странице пять неупорядоченных списков. Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
ul:nth-of-type(3) { border: 1px solid black; }
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
ul:nth-last-of-type(3) { border: 1px solid black; }