Визуализация: nth-child – как выбирать элементы на странице

Давайте разберёмся с :nth-child(). Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока. Хочется выделить каждый второй элемент? Или, скажем, каждый третий, начиная с четвёртого? С :nth-child() это легко! Можно просто написать номер, чтобы взять, к примеру, пятый элемент, или использовать что-то вроде «чётные» или «каждые три», чтобы всё красиво стилизовать.

Визуализация

Итак, у нас есть 12 карточек с котами и номерами. Вы можете кликать по ним самостоятельно или посмотреть все варианты анимаций.

Начнём с простого. Чтобы выбрать только четвёртый элемент, напишем :nth-child(4). Для выбора всех чётных (2, 4, 6, 8 и так далее) — :nth-child(even).

:nth-child(n+5) выбирает все элементы, начиная с пятого и далее (пятый, шестой и так далее). Возможен выбор и в обратную сторону, например, с десятого к первому — :nth-child(-n+10). А чтобы выбрать каждый третий элемент пишем :nth-child(3n).

Внимательно посмотрите на визуализацию всех вариантов и вы сразу всё поймёте.

Чётные элементы можно выбрать двумя способами — с помощью 2n и с помощью even, а нечётные — с помощью 2n+1 и odd. Это аналоги, только первые записаны с помощью математики, а вторые — с помощью заданных заранее значений. Всё очень просто.

Выбор значений «начиная с какого-то» — тоже простая задачка. Так, выбор с первого или со второго в сторону увеличения — это n+1, n+2, и так далее. А в обратную сторону пишем -n+7, -n+2 или -n+1. Важно сказать, что 1, -n+1 — это разные способы сделать одно и то же, просто выбрать первый элемент.

Давайте закрепим знания. Смотрите: каждый третий элемент выбираем с помощью 3n, каждый четвертый — с 4n. Элементы с цифрами 1, 5, 9 – это 4n+1 (потому что 4*0+1, 4*1+1, 4*2+1). 4n+2, 4n-1 и 4n-2 работают аналогично, это наглядно видно в визуализации.

И наконец разберёмся с вопросом посложнее — комбинацией :nth-child(). На примере ниже с помощью -n+6 можно выбрать все элементы с шестого по первый, то есть карточки с цифрами 6, 5, 4, 3, 2, 1. n+4 выберет карточки с четвёртой по девятую.

А вот их комбинация :nth-child(-n+6):nth-child(n+4) оставит только те карточки, которые есть в обоих наборах, то есть 4, 5 и 6.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.