Как обратиться ко второму элементу среди дочерних элементов?

Question

Чтобы обратиться ко второму дочернему элементу, используют псевдокласс :nth-child(2). Он выбирает элемент, который находится вторым среди всех дочерних элементов родителя. Нумерация начинается с 1. Селектор не учитывает тип элемента, а только его позицию.

YeaHub · Accepted Answer

Есть несколько способов выбрать второй дочерний элемент, но самый универсальный — 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), но важно учитывать типы элементов в разметке.