Используйте селектор прямых потомков с nth-of-type для A и C, а для footer — flex с gap: 0. Он не создаёт межэлементный пробел из пробельных узлов HTML.
Как оформить блоки CSS без изменения HTML
Используйте селектор прямых потомков с nth-of-type для A и C, а для footer — flex с gap: 0. Он не создаёт межэлементный пробел из пробельных узлов HTML.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Разметка: <div class="panel"><h2>Заголовок</h2><div>A</div><div>B</div><div>C</div><footer><div>X</div><div>Y</div></footer></div>. Сделайте нечётные прямые div жирными, footer отдельной строкой, а X и Y — рядом без зазора.
Ответ
Используйте селектор прямых потомков с nth-of-type для A и C, а для footer — flex с gap: 0. Он не создаёт межэлементный пробел из пробельных узлов HTML.
Стили:
.panel > div:nth-of-type(odd) { font-weight: 700; }
.panel > footer { display: flex; gap: 0; margin-top: 1rem; }
.panel > footer > div { margin: 0; }
H2 и footer не учитываются в нумерации div через nth-of-type. Это решение основано на указанной структуре; для смешанных div с другими назначениями нужен более точный контракт классов.