How to apply CSS only if class exists elsewhere in code?

So I'd like to only apply a certain CSS if a class exists in the code elsewhere. I was wondering if this is solely possible through css or if I need to use Jquery for this. Do anyone has any thoughts on this? If I need to use Jquery, can you give an example on how that might looks like?

As you can see in my code, what I try to do is apply a margin-top when li.active exists.

Obviously my jsfiddle is not working: http://ift.tt/1C6VWiI

Or see the code below:

div.navbar {
  background-color: #CCF;
}
ul.box {
  margin: 0;
}
div.text {
  background-color: #FFC;
  padding: 10px;
}
div.page div.navbar ul.box li.active div.text {
  margin-top: 100px;
}

<div class="page">
  <div class="navbar">
    <ul class="box">
      <li class="active"><a href="#">Link 1</a>
      </li>
    </ul>
  </div>
  <div class="text">This the div that should go down due to the submenu ul</div>
</div>