• Теория
  • Теория

Селектор последующих элементов

Ранее мы уже рассматривали соседние селекторы, которые записываются как селектор1 + селектор2.

Есть похожий селектор селектор1 ~ селектор2. Стили применятся к элементу, подходящему под селектор2, только если перед ним расположен элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

Отличие от соседнего селектора состоит в том, что между элементами селектор1 и селектор2 могут находиться другие элементы. Поэтому будем называть селектор1 ~ селектор2 селектором следующих элементов.

Сравним:

<ul class="cards">
  <li class="king diamond">
  <li class="queen heart">
  <li class="jack spade">
  <li class="ace heart">
  <li class="king club">
</ul>
.queen.heart + li {
  background-color: #ffff99;
}

.king.diamond ~ li {
  background-color: #99ddff;
}

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

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Селекторы. Погружение» тренажёра «Погружение в селекторы» можно после регистрации и оформления подписки.