Вопрос проверяет понимание того, как CSS выбирает элементы по их позиции среди соседей.
nth-child — это псевдокласс, который выбирает элементы на основе их позиции среди всех дочерних элементов родителя. Нумерация начинается с 1, а не с 0. Селектор учитывает все дочерние элементы, а не только элементы нужного типа. Это важно отличать от nth-of-type.
nth-child часто используют для стилизации списков, таблиц и повторяющихся элементов.
Определение: :nth-child() — псевдокласс CSS, выбирающий элемент по его порядковому номеру среди всех дочерних элементов родителя.
Браузер:
Берёт родительский элемент.
Считает всех его дочерних элементов.
Сравнивает позицию текущего элемента с формулой nth-child.
Конкретный номер:
li:nth-child(2) {
color: red;
}
Чётные и нечётные:
li:nth-child(even) { }
li:nth-child(odd) { }
Формула:
li:nth-child(3n + 1) { }
p:nth-child(2) { }
Сработает только если p — второй ребёнок родителя, а не второй p.
Вывод: nth-child выбирает элементы по позиции среди всех соседей, а не по типу, что важно учитывать при написании селекторов.