Change another class (CSS) noscript

Question

Hello, in the code below I want to change the class color selected image when passing the mouse in the class images.

The code example works by hovering the mouse on area_de_images, editing failed due to I have not studied, if possible I would like to be recommended css books, thank you.

<style>
	.galeria{
		position: relative;
	width: 600px;
		height: 700px;
		background:black;
	}
	.galeria .area_imagens{position: absolute;
		height: 100px;
		background: red;
		overflow-x:scroll;
		overflow-y:hidden;
		max-width: 100%;
		display: flex;
		flex-wrap: nowrap;
		}
	.galeria .area_imagens .imagens{
		position: relative;
		min-width: 100px;
		height: 100px;
		margin-left:15px;
		background:orange;
		float:left;
	}
	ul .imagem_selecionada{
			position: absolute;
		width:100%;
		height:100%;
		background:blue;
		top:100px;
		left:0px;
		}
	.area_imagens:hover ~ ul .imagem_selecionada{
		background: yellow;
	}
</style>

	<div class="galeria">
		<div class="area_imagens">
		<div class="imagens"></div>
		<div class="imagens"></div>
		<div class="imagens"></div>
		<div class="imagens"></div>
		<div class="imagens"></div>
		<div class="imagens"></div>
		<div class="imagens"></div>		
		</div>
		<ul>
	<a href="#"><img src="" class="imagem_selecionada"></a></ul>
</div>

Answer 1

First thing is that the element ul can only have as direct children elements li, that is, you cannot tag a as the direct son of ul. It would have to be like this:

<ul>
   <li>
      <a href="#"><img src="" class="imagem_selecionada"></a>
   </li>
</ul>

Another thing is that in CSS you can only access one element from another if that element is a child (direct or not, which can also be called descending) or a brother.

In the structure of your HTML you will not be able to access the element .imagem_selecionada from the .imagens because they are neither descendants nor brothers, that is, hierarchically there is no relationship between them (at most, roughly, they are elements cousins, but CSS does not consider prime elements).

The output would change the structure so that the elements .imagens are brothers of the element ul where is the .imagem_selecionada (which would be more complicated due to the fact of using flexbox with overflow) or using Javascript, as shown below:

// seleciona todas as .imagens
const imagens = document.querySelectorAll(".imagens");
// faz um loop adicionando os eventos de entra e sai do mouse
for(let img of imagens){
   img.onmouseenter = img.onmouseleave = function(e){
      var cor;
      if(e.type == "mouseenter"){
         cor = "yellow";
      }else{
         cor = "blue";
      }
      document.querySelector(".imagem_selecionada").style.background = cor;
   }
}

.galeria{
   position: relative;
   width: 600px;
   height: 700px;
   background:black;
}
.galeria .area_imagens{
   position: absolute;
   height: 100px;
   background: red;
   overflow-x:scroll;
   overflow-y:hidden;
   max-width: 100%;
   display: flex;
   flex-wrap: nowrap;
}
.galeria .area_imagens .imagens{
   position: relative;
   min-width: 100px;
   height: 100px;
   margin-left:15px;
   background:orange;
   float:left;
}
ul .imagem_selecionada{
   position: absolute;
   width:100%;
   height:100%;
   background:blue;
   top:100px;
   left:0px;
}

<div class="galeria">
   <div class="area_imagens">
      <div class="imagens"></div>
      <div class="imagens"></div>
      <div class="imagens"></div>
      <div class="imagens"></div>
      <div class="imagens"></div>
      <div class="imagens"></div>
      <div class="imagens"></div>		
   </div>
   <ul>
      <li>
         <a href="#"><img src="" class="imagem_selecionada"></a>
      </li>
   </ul>
</div>

Note that the CSS section below has been deleted:

.area_imagens:hover ~ ul .imagem_selecionada{
   background: yellow;
}