«nth-child» — это псевдокласс, который позволяет выбрать элементы на основе их порядкового номера в родительском элементе. Он используется для применения стилей к разным элементам в зависимости от их позиции в родительском элементе.
Синтаксис для «nth-child» выглядит так:
selector:nth-child(n)
где «selector» — это CSS-селектор, который выбирает родительский элемент, а «n» — номер элемента, к которому будут применены стили.
Элементы счёта начинаются с 1. Например, для выбора первого элемента списка можно использовать следующее правило:
li:nth-child(1) {
color: red;
}
Это правило выбирает первый элемент списка и применяет стиль к нему.
Также с помощью «nth-child» можно выбирать несколько элементов сразу. Например, для выбора каждого второго элемента можно использовать следующее правило:
li:nth-child(2n) {
color: blue;
}
В этом случае правило выбирает все элементы списка, которые имеют четный порядковый номер (2n).
Можно также использовать инструкции типа «odd» или «even», чтобы выбрать нечетные или четные элементы. Например, для выбора каждого второго нечетного элемента списка можно использовать следующее правило:
li:nth-child(odd):nth-child(2n+1) {
color: green;
}
В этом примере мы используем две инструкции «nth-child». Первая инструкция «:nth-child(odd)» выбирает все нечетные элементы списка, а вторая инструкция «:nth-child(2n+1)» выбирает каждый второй нечетный элемент списка.
Важно заметить, что «nth-child» не работает с классами или ID, только с позициями элементов в родительском элементе.
