Duno234 Duno234 - 5 months ago 11
CSS Question

CSS selector not working +, ~

this is driving me crazy :

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fcc1" style=""></i>
<i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fcc2" style=""></i>
<i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2"></i>
</span>

<style>
.fccc1:hover, .fccc2:hover, {
color:#115ebb!important;
}
.fccc1:hover + .fcc1 {
color:white!important;
}
.fccc2:hover + .fcc2 {
color:white!important;
}
</style>


The first CSS rule for the hover is working perfectly.
However the second and third css rule to change an other class when hovered is not working. I dont see any errors in the code and to my understanding this should work. I also tried with out the + and with a ~ selector.

Any help appriciated.

Answer

Here is a trick to traverse upwards, visually, using flex and order

body {
  background: gray;
}
.fa-stack {
  display: flex;
  flex-direction: column;
}
.fa-stack i:nth-child(1) {
  order: 2;
}
.fa-stack i:nth-child(2) {
  order: 1;
}
  
.fccc1:hover, .fccc2:hover {
color: #115ebb!important;
}
.fccc1:hover + .fcc1 {
color: white!important;  
}
.fccc2:hover + .fcc2 {
color: white!important;  
}
<span class="fa-stack fa-lg">
  <i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1">Second</i>
  <i class="fa fa-circle fa-stack-2x fcc1" style="">First</i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2">Second</i>
  <i class="fa fa-circle fa-stack-2x fcc2" style="">First</i>
</span>

Comments