Cелектор последующих элементов [10/20]
Ранее мы уже рассматривали соседние селекторы, которые записываются как селектор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;
}
В первом случае выделится одна карта, расположенная сразу за червовой дамой, то есть пиковый валет.
Во втором случае выделятся все карты, которые стоят за бубновым королем, то есть червовая дама, пиковый валет, червовый туз и трефовый король.
style2-10.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Cелектор последующих элементов</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
.king + li {
background-color: #ff3300;
}
.heart.jack ~ .ace {
background-color: #339933;
}
.club.king ~ .heart.jack {
background-color: #0099ff;
}
</style>
</head>
<body>
<ul class="cards">
<li class="ace heart"></li>
<li class="king diamond"></li>
<li class="queen club"></li>
<li class="jack spade"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
</ul>
<ul class="cards">
<li class="jack diamond"></li>
<li class="ace club"></li>
<li class="king spade"></li>
<li class="queen heart"></li>
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
</body>
</html>