Что нужно знать о селекторе :nth-child() в CSS

:nth-child() в CSS особенно полезен при стилизации сложных таблиц и списков. Вот что вам нужно знать о :nth-child() в CSS.

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

Этот селектор поддерживает некоторые основные ключевые слова для распространенных случаев. Кроме того, он также предоставляет мощный синтаксис сопоставления с образцом. С его помощью вы можете выбирать компоненты на основе регулярных шаблонов, повторений или сложных определений в соответствии с вашими потребностями.

Синтаксис селектора :nth-child()

Хотя это селектор псевдокласса CSS, синтаксис :nth-child() отличается от синтаксиса других селекторов. Для объединения элементов в дочернюю группу элементов требуется аргумент шаблона:

:nth-child(args) { /*.*/ }

Основное внимание уделяется аргументам в скобках. Эти аргументы определяют подмножество элементов, которые необходимо выбрать.

Используйте значения ключевых слов для распространенных случаев

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

Простой упорядоченный список — еще один хороший пример использования следующих значений ключевых слов:

1. Пункт 1
2. Пункт 2
3. Пункт 3
4. Пункт 4
5. Пункт 5
6. Пункт 6
7. Пункт 7

С помощью селектора :nth-child(odd) вы можете изменить цвет каждого замещающего элемента:

:nth-child(odd) { цвет: красный; }

Элементы начинаются с индекса 1, поэтому первый элемент будет выделен красным, а затем третий. Так далее и тому подобное:

Большая гибкость при использовании обозначения функций

Вы можете использовать одно целое число для выбора одного элемента, например:

li:nth-child(4) { цвет: красный; }

В этом случае селектор объединяет только 4-й элемент списка:

Этот синтаксис является частным случаем более общего функционального синтаксиса, который выбирает элементы, соответствующие определенному шаблону. Этот синтаксис:

:nth-child(An+B) { /*.*/ }

В этих обозначениях A — размер шага. Это означает, сколько раз селектор перемещается для выбора следующего элемента. Он позволяет выбирать каждый второй элемент, каждый третий элемент и т. д. B — начальная точка выбора.

Например, возьмем аргумент 3n+1 :

li:nth-child(3n+1) { цвет: красный; }

При этом выбор начнется с первого элемента и продолжится с каждым третьим элементом после этого:

Сравните его с выражением 3n+2:

li:nth-child(3n+2) { цвет:красный; }

Это действие по-прежнему выбирает каждый третий элемент, но теперь оно начинается со второго элемента в списке:

Еще один интересный пример: :nth-child(n+3):

li:nth-child(n+3) { цвет: красный; }

Этот код выберет каждый элемент (n), начиная с третьего (+3). Это будет выглядеть так.

Вы также можете использовать вычитание для достижения определенных результатов:

li:nth-child(3n-1) { цвет: красный; }

В этом примере по-прежнему выбирается каждый третий элемент, но он начинается с «первого знака минус». На практике это означает, что он выберет второй элемент в списке, затем пятый и т. д.:

Синтаксис

Вы также можете использовать ключевое слово of, за которым следует селектор, в качестве аргумента в селекторе :nth-child(). Этот синтаксис позволяет сузить возможные элементы, из которых выбирает обычный шаблон.

Например, представьте, что ваша разметка сложнее исходной:

1. Пункт 1
2. Пункт 2
3. Пункт 3
4. Пункт 4
5. Пункт 5
6. Пункт 6
7. Пункт 7

Теперь используйте :nth-chil

Теперь используйте :nth-child, чтобы выбрать четные элементы из набора элементов определенного класса:

.new { шрифт-вес: жирный; } li:nth-child(даже of.new) {цвет: красный; }

Обратите внимание, что красным выделены только четные элементы, выделенные жирным шрифтом:

Также обратите внимание на разницу с li.new:nth-child(even), который нацелен на элементы .new, но только если они четные. Это будут позиции 2 и 6 в приведенном выше примере.

Выше приведены все, что вам нужно знать об использовании селектора :nth-child() в CSS. Надеюсь, статья окажется для вас полезной.

В приведенной выше статье вы познакомились с «Что нужно знать о селекторе :nth-child() в CSS». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!