Style a class within another class if it is preceded by a div with a special class inside

Question

I want to edit css style for a Class3 which is inside a Class2 right after a Class1.

but I only want to edit style if Class1 has a specialClass inside, like this:

<div class="class1">
    <div class="specialClass"></div>
</div>
<div class="class2">
    <span class="class3"></span>
</div>

I tried this, but it doesn't work:

.class1 .specialClass ~ .class2 .class3 {}

Is this even possible? If yes can someone explain me the error I made?

Maybe we can be of better help if you also include your endgame in this scenario. There may be a simpler solution that doesn’t involve complicated (and impossible, to my knowledge) css. — Ben Steward, Aug 07 '18 at 05:39

score 1 · Accepted Answer · answered Aug 07 '18 at 06:55

$(function(){
 if($('.class1').find('.specialClass').length > 0){
     $('.class3').css("background-color", "yellow");
  }
})

div{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
span{
  padding-left: 50px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
    <div class="specialClass"></div>
</div>
<div class="class2">
    <span class="class3"></span>
</div>

Style a class within another class if it is preceded by a div with a special class inside

1 Answers1