Bem basicamente, tenho a seguinte estrutura, em que quando o hover
é ativado em um elemento, os irmãos da direita devem receber um estilo exclusivo, enquanto os da esquerda devem receber um outro estilo. Atualmente tenho o mesmo código funcionando bem em JS para estilizar os irmãos a esquerda do elemento em hover
porém, me sinto incomodado de não conseguir fazer tudo só com CSS, então a pergunta, é possível selecionar todos os irmãos antes do selecionado usando CSS?
.main{
width: 100%;
height:50px;
}
.child{
width:50px;
height:50px;
background-color:#F00;
display: inline-block;
margin-right: 5px;
}
.child:hover{
background-color: #0F0;
}
/*define cor para todos os siblings depois deste*/
.child:hover ~ .child{
background-color: #00F;
}
<div class="main">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>