How to target and style a div outside another div with CSS

Asked Jul 23 '19 at 14:07

Active Jul 23 '19 at 14:12

Viewed 179 times

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:

<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

asked Jul 23 '19 at 14:07

John

1,737
8
37
61

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? – Ghassen Louhaichi 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`. – Ghassen Louhaichi 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

How to target and style a div outside another div with CSS

0 Answers0