Вопрос проверяет знание базовых CSS-селекторов и понимание порядка дочерних элементов.
Чтобы обратиться ко второму дочернему элементу, используют псевдокласс :nth-child(2). Он выбирает элемент, который находится вторым среди всех дочерних элементов родителя. Нумерация начинается с 1. Селектор не учитывает тип элемента, а только его позицию.
Есть несколько способов выбрать второй дочерний элемент, но самый универсальный — nth-child.
.parent :nth-child(2) {
background: yellow;
}
Этот селектор выберет любой второй дочерний элемент.
Важно помнить про отличие от nth-of-type.
p:nth-child(2) { }
Сработает только если p реально второй ребёнок.
p:nth-of-type(2) { }
Сработает для второго p среди других p.
стилизация списков
выделение элементов сетки
UI-акценты
Вывод: для выбора второго дочернего элемента чаще всего используют :nth-child(2), но важно учитывать типы элементов в разметке.