CSS Change background parent of element

Question

I have some problem that i want to change it with css

<div class="a">
  <div class="b">
    <span></span>
  </div>
  <div class="c">
   <span></span>
  </div>
  <div class="d">
   <span class="e"></span>
  </div>
</div>

I want to change background of div.b and div.c by using span.e
Please help me.
Thanks

Answer 1

The following answer assumes you are asking how to use span.e as part of a selector to change the rules for div.b and div.c. For example:

span.e:parent:prevAll.b { background:red } // concept-code, doesn't actually work

You can't do that with CSS alone, you would need to use something like jQuery (javascript) to handle this for you. With CSS, you can reference children from parents, but not parents from children. Or in this case uncles from nephews...

Answer 2

At current, CSS cannot go up the chain (child to parent) only down the chain (parent to child). You could probably use jQuery to do what you want here, but you should probably rewrite the HTML so its not difficult.

Answer 3

You can't do that with CSS, you'd need something like jQuery. It's difficult to know exactly what to suggest since it's unclear how you want the system to work, but this should help:

$('.e').parents('div').eq(0).addClass('red');

You would already have a class in your CSS: .red { background-color: red; } (you might want to name it better though).