Ранее мы уже рассматривали соседние селекторы, которые записываются как селектор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;
}

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

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