CSS Finding a selector thats not a child

Question

In the below examples I have 2 div's, What I'm trying to figure out is how to make .two green when .one is .active. Is it possible? jsFiddle

div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
.one.active ~ .two {
  background: green;
}

<directive-one>
  <div class="one active">
    First block
  </div>
</directive-one>
<directive-two>
  <div class="two">
    Second block
  </div>
</directive-two>

Answer 1

You can do this be referencing the directives specifically in css

div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
directive-one:active ~ directive-two > .two {
  background-color: green;
}

<directive-one>
  <div class="one active">
    First block
  </div>
</directive-one>
<directive-two>
  <div class="two">
    Second block
  </div>
</directive-two>

You can also just remove the directives so the divs can be accessed

div {
  position: relative;
  height: 100px;
  width: 300px;
}
.one {
  background: red;
}
.two {
  background: blue;
}
.one:active ~ .two {
  background-color: green;
}

<div class="one active">
  First block
</div>

<div class="two">
  Second block
</div>

Otherwise, I dont believe its possible to access a div that isnt a sibling or child, which is the case with the <div> inside the <directive-one> trying to access another <div> inside another <directive-two>

Answer 2

If you mark the directive-one with active, then it is possible to do with this css:

directive-one.active ~ directive-two > .two {
  background: green;
}

I don't think it is possible to dig into the 'preceding' element though, but not totally sure.