Find previous sister div in CSS

Question

I have the following HTML:

<div class="load">
    <img src="images/load.svg" class="loadimg">
</div>

<div class="tela carregando">
    <span>Teste</span>
</div>

the following css:

.carregando {
    display: none;
}

.load {
    display: none;
}

.load > .carregando {
    display: block;
}

and the JS:

$(".loadimg).click(function(){
    $('.tela').removeClass('carregando');
});

I want that when I remove the class loading CSS to change the style to something like:

.load > .carregando {
    display: block;
}

If the class carregando has activated the class load is display block... in this last example CSS tried using > but it didn’t work out...

It has to be in CSS in jQuery I know how to do...

Answer 1

Try styling the CSS like this:

$(".loading").click(function(){
    $('.tela').removeClass('carregando');
});

.carregando {
    display: none;
}

.load {
    display: none;
}

.carregando ~ .load {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tela carregando">
    <span>Teste</span>
</div>

<div class="load">
    <img src="images/load.svg" class="loadimg">
</div>

<button class='loading'>TESTE</button>

What is it called Sibling I had to change the order of the elements.