Эта функция CSS особенно полезна для стилизации таблиц и сложных списков.

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

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

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

Как Селектор псевдоклассов CSSсинтаксис :nth-child() отличается от других селекторов. Он принимает аргумент в качестве шаблона для сопоставления элементов в наборе одноуровневых элементов:

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

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

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

instagram viewer

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

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

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Используя :nth-child (нечетный) Селектор вы можете изменить цвет каждого альтернативного элемента:

:nth-child(odd) {
color: red;
}

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

Функциональная запись для большей гибкости

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

li:nth-child(4) {
color: red;
}

В этом случае селектор соответствует только четвертому элементу списка:

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

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

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

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

li:nth-child(3n+1) {
color: red;
}

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

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

li:nth-child(3n+2) {
color:red;
}

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

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

li:nth-child(n+3) {
color: red;
}

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

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

li:nth-child(3n-1) {
color: red;
}

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

Из Синтаксис

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

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

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

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

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

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

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

Работа с селектором :nth-child()

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