Как написать CSS-селектор для изменения цвета во второй колонке вложенного контейнера?

Что проверяют

Понимаете ли вы разницу между комбинаторами и то, как на самом деле считает :nth-child. Слово «вложенный» в вопросе стоит не зря: интервьюер ждёт, что вы не заденете колонки во внутренних контейнерах. Следом часто просят то же самое для сетки на CSS Grid.

Как отвечать

Сначала уточните разметку, потом пишите селектор:

• дочерний комбинатор: .container > .column:nth-child(2). Знак > ограничивает поиск прямыми детьми, а пробел выбрал бы вторые колонки на любой глубине, включая вложенные контейнеры;
• вложенный контейнер: .outer .inner > .column:nth-child(2), а надёжнее дать внутреннему контейнеру свой класс и не полагаться на глубину;
• :nth-child(2 of .column): считает только элементы с классом .column. Обычный :nth-child(2) считает всех соседей подряд, и если первым идёт заголовок, «второй колонкой» окажется первая. Синтаксис of работает во всех актуальных браузерах;
• :nth-of-type(2): считает по тегу, а не по классу, поэтому среди одинаковых div с разными классами даст не то;
• сетка: у Grid нет селектора колонки. При трёх колонках во второй стоят элементы 2, 5, 8, то есть .grid > :nth-child(3n + 2);
• таблица: td:nth-child(2). Через <col> цвет текста не задать, колонке доступны только фон, ширина, рамка и visibility.

Нативная вложенность CSS позволяет записать то же без препроцессора: .container { & > .column:nth-child(2) { color: red; } }. Про специфичность: .container > .column:nth-child(2) весит как три класса, и если правило должно легко перебиваться, оберните часть в :where().

Где спотыкаются

Пишут селектор через пробел. На простой разметке он работает, а на вложенной красит вторые колонки на всех уровнях.

Считают, что .column:nth-child(2) означает вторую колонку среди колонок. На деле это элемент, который стоит вторым среди всех соседей и при этом имеет класс .column.

Ставят !important, когда правило не срабатывает, вместо того чтобы разобраться со специфичностью или порядком подключения стилей.