CSS: выбор и стиль следующего элемента после тега

Быстрый ответ

Выбрать элемент, расположенный непосредственно после предыдущего, можно с использованием смежного комбинатора + в CSS.

/* Данный код позволит окрасить в синий цвет абзац <p>, находящийся непосредственно после заголовка <h2> */
h2 + p {
  color: blue;
}

Селектор целится в комбинацию: тег <p>, что следует непосредственно за тегом <h2>, находясь при этом на одном уровне вложенности и без промежуточных элементов.

Разбор селекторов смежных элементов в CSS

В чем разница между смежными и общими селекторами соседей?

Селекторы соседей в CSS классифицируются на смежные (+) и общие (~). Смежный комбинатор + предназначен для оформления конкретного тега <p>, непосредственно следующего за выбранным элементом, а в то время как комбинатор ~ используется для всех тегов <p>, располагающихся после определенного элемента при наличии общего родителя.

Вот примеры:

/* Смежный селектор соседей применится к первому <p>, следующему за <h1> */
h1.hc-reform + p {
  clear: both; /* Обтекание float выключается от данного места */
}

/* Общий селектор соседей будет применен ко всем <p>, расположенным после <h1> */
h1.hc-reform ~ p {
  margin-top: 20px; /* Устанавливаем верхний отступ */
}

Обратный отсчет времени: как обойти проблему со старыми браузерами?

Комбинатор + может иметь проблемы совместимости с IE6 и его ранними версиями. В таких ситуациях, в качестве альтернативы, можно использовать классы или JavaScript. Также может быть полезна специфичность CSS, которая определяет приоритетность стилей.

Визуализация

Пусть CSS-селекторы для смежных элементов будут представлены следующим образом:

Путешественники 🧑 находятся в аэропорту, а + — офицер службы безопасности 🔍, который пропускает лишь следующего по очереди:

Ожидающие путешественники: 🧑🔍🧑🧑🧑  // Представляет ряд элементов

Селектор .firstClass + .economy можно визуализировать как:

.firstClass: 🧑🔍🧑 // Пассажир бизнес-класса, после которого следует пассажир эконом-класса

Правильная обработка:

🧑🥇 `('.firstClass')` 
🔍  `('+')` 
🧑🛅 `('.economy')`

Селектор или офицер службы безопасности пропускает только пассажира эконом-класса, который идет сразу после пассажира первого класса.

Надежное использование селектора "Нет" +

Использование + не всегда подходит. При работе с вложенными элементами лучше использовать комбинатор потомства >.

Пример:

/* <div> выделяет внимание на своём потомка – <p> */
div > p {
  font-weight: bold; /* Делаем текст жирным */
}

Работа с динамическим контентом

При работе с динамически обновляемым контентом помните, что структура может изменяться. Мудро используйте JavaScript, чтобы изменения DOM не нарушили функционирования ваших селекторов. Тщательное тестирование обязательно.

Распространенные проблемы и пути их решения

Конфликт стилей

Специфичность в CSS определяет приоритет различных стилей. Временами, она может препятствовать работе смежных селекторов. Чтобы встретиться с этой проблемой, можно повысить специфичность вашего селектора или изменить стили, которые вызывают конфликт.

Ошибки в определении взаимоотношений между родителем и потомками, а также соседними элементами

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

Практические подходы и советы

Соображения пространственного раположения

Прежде чем использовать +, тщательно анализируйте структуру HTML. Понимание этой структуры поможет в выборе подходящего комбинатора.

Двигаемся вперед

В современном веб-разработке поддержка старых браузеров редко требуется, что делает использование комбинатора + удобным способом поддержания кода ясным и чистым.

Экспериментируйте с псевдоклассами

Опробуйте комбинацию комбинатора + с псевдоклассами, например :hover, позволяя изменять стиль следующего элемента при наведении курсора на главный:

button:hover + .tooltip {
  visibility: visible; /* Отображаем подсказку */
}

Это дает возможность создавать интерактивные элементы пользовательского интерфейса с меньшей зависимостью от JavaScript.

Баланс и проверка

Регулярно проводите проверку HTML и CSS с помощью Сервиса валидации разметки W3C и Сервиса валидации CSS W3C для обеспечения корректной работы селекторов.

Полезные материалы