Hover in third div affect the first - Previous sibling element - with pure CSS

Look, although some people say that it is impossible, I say that in some cases, as yours is possible!

But for this you will need some badness with CSS, because you will need 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 because of prioridade and hierarquia at the time of applying the style, where one rule needs to be stronger than another. You can read more about it here: Which css selector has priority?

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

In this way the div with the 0 is actually the first in dom , but on the screen it is the second class .txt ! Which way, being the first one I can reach the brothers below with the selector + or ~ .

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

Seethecodefortheimage.ItmightbepossibletofurtherrefinethisCSS,buthjIwokeupfromhangoveranditwasthebestIcouldthinkof: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>