0

I have a div which I want to target to change the background colour.

This div lives in one container (main) and the target div lives within another (footer)

So I want to use the div promo to target footer-inner like so:

Demo: https://jsfiddle.net/yeLpnu36/ 

<main>
  <div class="promo">
    <p>
    stuff here
    </p>
  </div>
</main>

<footer class="my-footer">
  <div class="footer-inner">
  <p>
  change background of this div from promo
  </p>
  </div>
</footer>

I have tried things like:

.promo > .footer-inner,
.promo + .footer-inner,
.promo ~ .footer-inner {
  background: yellow !important;
}

But with no success.

Any ideas how I can change the background colour of footer-inner using promo?

Thanks

John
  • 1,777
  • 9
  • 42
  • 66
  • I'm afraid you can't, CSS selectors do not go up the HTML tree, only down and sideways. You can use JavaScript to dynamically assign styles, have you considered that? – M0nst3R Jul 23 '19 at 14:13
  • is it not going down the HTML tree ie: promo > footer-inner? – John Jul 23 '19 at 14:16
  • No, in CSS, siblings must have the same direct parent. In your case, that is not true, because you have two different parents: `main` and `footer`. – M0nst3R Jul 23 '19 at 14:18
  • I think you add a comma between the classes `.promo, .footer-inner {...` if I'm understanding your question correctly – Dumisani Jul 23 '19 at 14:18
  • ah i see, thanks for the clarification – John Jul 23 '19 at 14:21

0 Answers0