Можно ли комбинировать nth-child с вложенными селекторами?

Question

Да, nth-child можно комбинировать с вложенными селекторами и комбинаторами. Он применяется к элементу в контексте его родителя, а остальные части селектора уточняют область поиска. Такой подход позволяет выбирать элементы очень точно. Главное — помнить, что nth-child всегда считается относительно непосредственного родителя.

YeaHub · Accepted Answer

Комбинирование селекторов — нормальная практика в реальных интерфейсах.Пример с вложенностью.list > li:nth-child(2) {
  color: red;
}
Выберется второй li, который является прямым потомком .list.Пример с контекстом.card .item:nth-child(3) {
  font-weight: bold;
}
Здесь nth-child(3) применяется к .item относительно его родителя внутри .card.Типичная ошибкаОжидание, что nth-child будет считаться относительно всего документа, а не родителя.Когда это полезносложные спискикарточки с повторяющимися блокамидизайн-системыВывод: nth-child отлично комбинируется с вложенными селекторами, но всегда работает относительно конкретного родителя.