Hover in Third Div Affect First - Previous Sibling Element - With Pure CSS

Question

<div class="selelikes-wrap">

<div class="selelike">
<span><</span>
</div>

<div>
<span>0</span>
</div>

<div class="seleunlike">

<span>></span>

</div>

I want the class div seleunlike when passing the mouse stir in the selelike, and vice versa.

Who can help I’m very grateful!

http://jsfiddle.net/r0vdw1qm/

Answer 1

Look though some say it’s impossible, I say that in some cases like yours is possible yes!

But for that you will need some evil with CSS, because you will need some kind of complex rules like:

.selelikes-wrap:hover div:nth-child(1):hover ~ div{...}

and

.selelikes-wrap:hover div:not(:hover):nth-child(1){...}

These rules need to be so mainly due to prioridade and hierarquia when it comes to applying style, where one rule needs to have force greater than another. You can read more about it here: Which css selector has priority?

Another VERY important point is that the container father needs to be in flex, because with the flex I can use the attribute order to determine what will be the order that the children will appear on the screen, even the order on dom being different.

Thus the div with the 0 is actually the first in the dom, but on the screen she is the second class .txt! However, being the first I can reach the brothers below with the selector + or ~.

See in the image below how it looked, the div with the 0 actually is the first child, but on the screen renders as second child. But in dom and in css it remains as first child

See the code for the image. It may be possible to refine this CSS even more, but I woke up with a hangover and it was the best I could think of :D

.selelike,
.seleunlike {
    border: 1px solid #999;
    cursor: pointer
}

.selelikes-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.selelikes-wrap:hover div:hover{
    transform: scale(1.2);
}
.selelikes-wrap:hover div:not(:hover){
    transform: scale(0.9);
    background-color: orange;
}
.selelikes-wrap:hover div:nth-child(1){
    transform: scale(1);
    background-color: transparent;
}
.selelikes-wrap:hover div:nth-child(1):hover ~ div{
    background-color: transparent;
}
.selelikes-wrap:hover div:not(:hover):nth-child(1){
    transform: scale(1);
    background-color: transparent;
}

.selelikes-wrap:hover .txt:hover + .selelike {
    transform: scale(1);
}
.selelikes-wrap:hover .txt:hover ~ .seleunlike {
    transform: scale(1);
}

/* repare que no dom o iv .txt é o primeiro filho,
mas usando a propriedade "order" eu renderizo na tela 
a div .txt visualmente como segundo filho :) */
.selelike {
    order: 1;
}
.txt {
    order: 2;
}
.seleunlike {
    order: 3;
}

<div class="selelikes-wrap">

    <div class="txt">
        <span>0</span>
    </div>

    <div class="selelike">
        <span><</span> 
    </div> 

    <div class="seleunlike">
        <span>></span>
    </div>

</div>