Соседние элементы - как на них повлиять с помощью CSS?

На соседние элементы с помощью CSS можно повлиять с помощью селектора (~). Соблюдая условие, что у соседних элементов один родитель.

Рассмотрим простой пример, где при наведении на заголовок в теге h5 подсветим фон у контента, со следующей разметкой:

Заголовок

Контент, который подсветится фоном, если навести мышку на заголовок


<div class="test10">
    <h5>Заголовок</h5>
    <p>Контент, который подсветится фоном, если навести мышку на заголовок</p>
</div>
<style>
.test10 {width:200px;padding:10px 20px;border:1px solid #DDD;}
.test10 h5:hover ~ p {background:#CCC;}
</style>




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

Покрасить Блок первый в зелёный цвет
Покрасить Блок второй в синий цвет
Блок первый
Блок второй


<div class="test11">
  <div class="bl1">Покрасить Блок первый в зелёный цвет</div>
  <div class="bl2">Покрасить Блок второй в синий цвет</div>
  <div class="block1">Блок первый</div>
  <div class="block2">Блок второй</div>
</div>
<style>
.test11 {width:400px;padding:10px 20px;border:1px solid #DDD;}
.test11 .bl1:hover ~ .block1 {background:#03A508;color:#FFF;}
.test11 .bl2:hover ~ .block2 {background:#0353A3;color:#FFF;}
</style>




В следующий пример мы добавим немного анимации. При наведении на верхние блоки мы заставляем нижний блок изменять свою позицию. (пример взят с хабра)

Вправо
Влево
Вверх
Вниз

Блок для движения


<div class="test12">
  <span class="right">Вправо</span>
  <span class="left">Влево</span>
  <span class="top">Вверх</span>
  <span class="down">Вниз</span>
  <div class="block">Блок для движения</div>
</div>
<style>
.test12 {padding:10px 20px;border:1px solid #DDD;position:relative;height:400px;}
.test12  span {position:absolute;display:block;width:60px;height:40px;margin:10px;background:#DDD;padding:5px;}
.test12 .left {top:10%;}
.test12 .right {top:10%;left:37%;}
.test12 .top {left:20%;top:1%;}
.test12 .down {top:20%;left:20%;}
.test12 .block {position:absolute;top:50%;right:50%;width:100px;height:50px;margin:5px;background:#999;-webkit-transition:all 2s ease;-o-transition:all 2s ease;    -moz-transition:all 2s ease;padding:5px;}
.test12 .right:hover ~ .block{right:10%;}
.test12 .left:hover ~ .block{right:90%;}
.test12 .top:hover ~ .block{top:10%;}
.test12 .down:hover ~ .block{top:90%;}
</style>




И еще один пример с хабра, как можно влиять с помощью стилей css на соседние элементы.


<div class="test14">
    <div class ="w-b">
      <div class="sun">
        <p></p>
      </div>
      <div class="derevo">
       <div class="cvetok">
              <div class="lep h3"></div>
              <div class="lep h6"></div>
              <div class="lep h9"></div>
              <div class="lep h12"></div>
              <div class="lep h15"></div>
              <div class="lep h45"></div>
              <div class="lep h75"></div>
              <div class="lep h105"></div>
              <div class="korzinka"></div>
          </div>
      </div>
    </div>
</div>
<style>
.test14{
width:700px;
height:700px;
margin:0 auto;
background:black;   
position:relative;
}
/*Солнце*/
.sun{
position: relative;
z-index:4;
width:250px;
height:250px;
background:#ccc;
border:1px solid gray;
box-shadow:0px 0px 150px gray;
border-radius:50% 50% 50% 50%;
-webkit-transition:all 2s ease;
-o-transition:all 2s ease;
-moz-transition:all 2s ease;

}
.sun p{
position: absolute;
width:150px;
height:150px;
top:70px;
left:50px;
}
.sun:hover{
background:#ffff00;
box-shadow:0px 0px 300px yellow,0px 0px 100px orange;
}
.sun:hover~.derevo .list{
background:green;
}
.sun:hover~.derevo .cvetok .lep{
background:white;

}
.sun:hover~.derevo .cvetok .korzinka{
background:orange;
box-shadow:0px 0px 50px orange;
}
.sun:hover~.derevo .cvetok{
-webkit-transform:rotate(555deg);
-o-transform:rotate(555deg);
-moz-transform:rotate(555deg);
}

/*растение*/
.derevo{
margin-left:250px;   
}
.cvetok{
width:350px;
height:350px;
position:relative;
-webkit-transition:all 8s ease 0.5s;
-o-transition:all 8s ease 0.5s;
-moz-transition:all 8s ease 0.5s;   
}
.lep{
-webkit-transition:all 2s ease 1s;
-o-transition:all 2s ease 1s;
-moz-transition:all 2s ease 1s;   
position:absolute;
width:150px;
height:50px;
background:#CCC;
border-radius:1px 25px 25px 1px;
/*box-shadow:0px 0px 5px silver;*/
}
.korzinka{
box-shadow:0px 0px 50px gray;
-webkit-transition:all 2s ease 2.5s;
-o-transition:all 2s ease 2.5s;
-moz-transition:all 2s ease 2.5s;

   
position:absolute;
background:silver;
width:140px;
height:140px;
border-radius:50%/50%;
left:105px;
top:105px;
}
.h3{
right:0px;
top:150px;
}
.h6{
bottom:50px;
left:100px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
.h9{
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
top:150px;
}
.h12{
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-moz-transform:rotate(270deg);
top:50px;
left:100px;
}
.h15,.h45, .h75, .h105{
width:200px;
}
.h15{
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);   
left:125px;
top:100px;
}
.h45{
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
left:125px;
top:200px;
}
.h75{
-webkit-transform:rotate(135deg);
-o-transform:rotate(135deg);
-moz-transform:rotate(135deg);
top:210px;
left:15px;
}
.h105{
-webkit-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
top:100px;
right:125px;
}
</style>

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