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

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

Пример применения смежного селектора: h2 + p { color: #757575; margin-top: 0; }. 2 В данном случае к абзацу (

), непосредственно следующему за заголовком второго уровня (

), применяются определённые стили: цвет текста изменится на серый, а верхний отступ будет устранён. 2

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

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

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