Как использовать смежные селекторы для стилизации соседних элементов?

Смежные селекторы в CSS позволяют выбирать элементы HTML-страницы, которые стоят рядом друг с другом и имеют общего родителя. elbrusboot.camp Первый элемент должен быть соседом второго элемента, чтобы смежный селектор сработал. elbrusboot.camp

Пример применения смежного селектора: h2 + p { color: #757575; margin-top: 0; }. htmlacademy.ru В данном случае к абзацу (<p>), непосредственно следующему за заголовком второго уровня (<h2>), применяются определённые стили: цвет текста изменится на серый, а верхний отступ будет устранён. htmlacademy.ru

Ещё один пример: h2 + div { color: red; }. coursme.com В этом случае селектор h2 + div выбирает блок div, который идёт непосредственно после заголовка h2, и применяет к нему стиль, делая текст внутри блока красным. coursme.com

При использовании смежного селектора важно учитывать:

• применять его с умом, особенно в сложных структурах HTML, поскольку изменения в разметке могут повлиять на его работоспособность; htmlacademy.ru
• ограничить использование смежного селектора для поддержания простоты и читаемости кода, особенно когда речь идёт о крупных стилевых листах. htmlacademy.ru