Тренажёр :nth-child
Тренажёр помогает разобраться, какие элементы выбирают :nth-child(), :nth-last-child(), :nth-of-type() и :nth-last-of-type(). В песочнице меняйте формулу an+b и сразу видите выбранные элементы и расчёт по шагам, а в заданиях — подбираете селектор под нужный результат: каждый третий, первые три, диапазон, второй абзац среди span, второй элемент с классом.
Как пользоваться
В песочнице выберите псевдокласс и введите формулу. Элементы подсвечивает сам браузер, а под рядом показан расчёт: какие позиции получаются при n = 0, 1, 2… Поле «of S» работает с :nth-child и :nth-last-child.
В заданиях пишите полный селектор, например p:nth-child(2). Засчитывается любой селектор, который выбирает ровно нужные элементы. Решённые задания отмечаются галочкой в списке и сохраняются в браузере; кнопка со стрелкой по кругу сбрасывает прогресс.
Как считается формула an+b
Браузер подставляет n = 0, 1, 2… и выбирает элементы на получившихся позициях; позиции считаются с 1, значения меньше 1 пропускаются.
2n+1илиodd— 1, 3, 5…;2nилиeven— 2, 4, 6…3n— 3, 6, 9… (при n = 0 получается 0 — такой позиции нет).n+4— все, начиная с 4-го;-n+3— 3, 2, 1, то есть первые три.- Число без n выбирает одну позицию:
:nth-child(5).
Песочница
1p
2span3p.featured
4p
5span.featured6p
7span8p.featured
9p
10span11p.featured
12p
Задания
выбран и нуженвыбран, но лишнийнужен, но не выбран
Подсказка
Показать один из ответов
— подойдёт и любой другой селектор с тем же результатом.
Для тренажёра включите JavaScript. Пример: li:nth-child(odd) выбирает нечётные пункты, аli:nth-child(-n+3) — первые три.
nth-child или nth-of-type
:nth-child считает всех детей родителя, а затем проверяет остальную часть селектора. Поэтому p:nth-child(2) означает «второй ребёнок, если это абзац», а не «второй абзац». :nth-of-type считает только элементы того же тега: p:nth-of-type(2) — второй абзац, сколько бы span ни стояло между ними.
Синтаксис :nth-child(2 of .featured) считает только элементы, подходящие под селектор после of, — так выбирают, например, второй выделенный пункт. Это не то же самое, что .featured:nth-child(2): тот выбирает выделенный элемент, только если он стоит вторым среди всех детей.
Вопросы и ответы
Как выбрать последние элементы?
Псевдоклассы :nth-last-child и :nth-last-of-type считают с конца: li:nth-last-child(-n+2) — два последних пункта при любом их количестве.
Как выбрать диапазон?
Объедините два условия на одном элементе: li:nth-child(n+3):nth-child(-n+6) выбирает пункты с 3-го по 6-й.
Считаются ли текстовые узлы и комментарии?
Нет, только элементы. Текст между тегами и комментарии на нумерацию не влияют.
Справочник
Подробнее — в статьях о псевдоклассах :nth-child(), :nth-last-child(), :nth-of-type() и :nth-last-of-type(). Другие селекторы потренировать можно в тренажёре селекторов.