Nth-child в CSS: полный гид по стилизации элементов

Автор Легина Марина November 1, 2023

Nth-child - один из самых полезных и мощных инструментов CSS для работы с дочерними элементами на странице. Он позволяет выбирать и стилизовать элементы в зависимости от их положения среди соседних элементов внутри родителя. Используя удобную формулу типа 2n+1, 3n и т.д. можно точно указать нужные элементы. Это избавляет от необходимости задавать для каждого элемента отдельный класс или идентификатор. Применение nth-child не ограничивается списками, с его помощью можно стилизовать строки и столбцы таблиц, элементы галереи, создавать различные циклические анимации и художественные эффекты. В этой статье мы подробно разберем как работает nth-child, рассмотрим решение распространенных задач и дадим полезные советы по использованию.

Что такое nth-child и как он работает

Nth-child - это псевдокласс в CSS, который позволяет выбирать дочерние элементы родительского блока на основе их порядкового номера. Он имеет следующий синтаксис:

:nth-child( формула ) { }

Где вместо формулы подставляется математическое выражение типа 2n, 3n+1 и т.д. Это выражение определяет, какие именно дочерние элементы будут выбраны.

Принцип работы

В основе работы nth-child лежит формула An+B. Здесь A и B - целые числа, а n - переменная, которая принимает значения 0, 1, 2, 3... при каждой итерации. Браузер подставляет в формулу вместо n последовательные числа, чтобы выбрать нужные элементы.

Например, выражение 2n означает, что будут выбраны все четные элементы: для n=0 получаем 2*0=0, для n=1 получаем 2*1=2, для n=2 получаем 2*2=4 и т.д. А выражение 3n+1 выберет все элементы с номерами 1, 4, 7, 10 и так далее.

Примеры базовых выражений

2n - все четные элементы
2n+1 - все нечетные элементы
3n - каждый третий элемент
5n+3 - элементы с номерами 3, 8, 13 и т.д.

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

Отличия от nth-of-type

Важно понимать разницу между nth-child и nth-of-type. Первый выбирает элементы исходя из их порядкового номера среди всех дочерних элементов родителя. Второй выбирает элементы только среди элементов заданного типа.

Например, чтобы выделить второй параграф в блоке, нужно использовать nth-of-type(2), а не nth-child(2). Потому что вторым дочерним элементом может быть другой тег, например заголовок.

Ключевые слова и специальные значения

В nth-child можно использовать специальные ключевые слова вместо формул:

odd - для выбора нечетных элементов
even - для выбора четных элементов

Это позволяет быстро и удобно стилизовать четные или нечетные элементы, не прибегая к формулам. Например:

tr:nth-child(odd) { background: #ccc; }

Подсветит нечетные строки таблицы.

Также полезно знать про значения:

first - выбор первого элемента
last - выбор последнего элемента

Это эквивалентно nth-child(1) и nth-last-child(1) соответственно.

Выбор диапазонов элементов

С помощью nth-child можно выбирать не только отдельные элементы, но и задавать диапазоны. Для этого используется запись наподобие:

:nth-child(n+a):nth-child(-n+b)

Где a - начальный номер, а b - конечный номер диапазона.

Например:

:nth-child(n+3):nth-child(-n+8)

Выберет элементы с 3го по 8ой.

"nth child css" Можно комбинировать выражения nth-child, чтобы решать более сложные задачи. Скажем, нужно выбрать каждый 3ий элемент от 5го до конца:

:nth-child(3n+3):nth-child(n+5)

Это позволяет гибко управлять выбором практически любых элементов на странице.

Использование of в nth-child

Очень полезная фича, появившаяся в CSS Selectors Level 4 - это возможность добавлять в nth-child предварительную фильтрацию элементов с помощью ключевого слова of.

Синтаксис выглядит так:

:nth-child( формула of селектор )

То есть сначала отбираются элементы по заданному селектору, а уже среди них выбираются нужные nth-child.

"nth child css" Например:

:nth-child(2 of .special)

Выберет 2й элемент с классом special, а не просто 2й дочерний элемент.

Работа с отрицательными значениями

Числа в формуле nth-child могут быть не только положительными, но и отрицательными. Это позволяет выбирать элементы от конца списка.

Например:

-n+3 - элементы от 3го с конца
-2n+1 - все элементы с конца с шагом 2
-n+1 - последний элемент

"css" Отрицательные значения дают дополнительную гибкость при выборе элементов. Особенно если комбинировать их с положительными значениями:

:nth-child(n+5):nth-child(-n+3)

Выберет элементы от 5го до 3го с конца.

Nth child css каждый третий

Один из самых распространенных случаев использования nth-child - это выбор каждого N-го элемента в списке. Это позволяет создавать различные визуальные эффекты, вроде полосатых таблиц или подсветки элементов.

Чтобы выбрать каждый третий элемент, используем формулу:

:nth-child(3n)

Где 3 - шаг, а n - переменная, которая в цикле принимает значения 0, 1, 2, 3... Подставляя эти значения в формулу, получим выбор элементов с индексами 3, 6, 9 и т.д.

Полезные советы и рекомендации

"css" При использовании nth-child существует несколько полезных советов, которые помогут избежать распространенных ошибок и использовать его максимально эффективно.

Инструменты для формул

Не нужно пытаться держать в голове все возможные формулы и варианты nth-child. Пользуйтесь специальными инструментами, которые помогут быстро сгенерировать нужное выражение, например: