CSS selector not working +, ~

Question

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.

Sorry misread the class names and hence the wrong comment earlier. The element with `class='fcc1'` is above the element with `class='fccc1'` in the DOM and CSS selectors cannot traverse the DOM upwards. You either have to interchange the order of the elements or use JS. — Harry, Jun 14 '16 at 17:33
CSS selectors cannot traverse the DOM upwards. <== Makes sense to me and is probably the answer. — Duno234, Jun 14 '16 at 17:34
There is a trick to traverse upwards, visually, using `flex` and `order` ... should I post an answer for you with that? — Asons, Jun 14 '16 at 17:40
If I understand you want a trick like this https://jsfiddle.net/kedkavzt/ ? — DaniP, Jun 14 '16 at 17:41
@Oriol OP isn't asking for a parent selector ... it's asking *to traverse upwards* / siblings as LGSon points — DaniP, Jun 14 '16 at 17:45
@DaniP OK, sorry, I got confused because the concept is the same. The proper duplicate is [Is there a “previous sibling” CSS selector?](http://stackoverflow.com/q/1817792/1529630) — Oriol, Jun 14 '16 at 17:51

score 0 · Answer 1 · edited Jun 14 '16 at 17:35

0

div + p - Selects all <p> elements that are placed immediately after <div> elements

For reference - CSS Selectors

edited Jun 14 '16 at 17:35

TheZ

3,663
19
34

answered Jun 14 '16 at 17:32

SESN

1,275
13
22

score 0 · Answer 2 · answered Jun 14 '16 at 17:34

Your first rule handles both .fccc1 and .fccc2, which both exist.

Your second rule, though, is for an .fccc1 element following another .fccc1 element. In your case, that doesn't exist. The preceeding element is .fcc1 instead. Your rule would need to be:

.fcc1:hover + .fccc1

score 0 · Accepted Answer · answered Jun 14 '16 at 17:47

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>

Harry, DaniP and LGSon, thanks you totally understood my problem and LGSon took the time to post a detailed example how to solve. — Duno234, Jun 14 '16 at 17:50

CSS selector not working +, ~

3 Answers3