Bangsi Bangsi - 1 month ago 6
CSS Question

CSS Finding a selector thats not a child

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

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>

Comments