Update header color based on page content

Question

I have a website I'm building with a header that is going to be present on all pages. However, I'd like the header to change background color depending on div that follows the header. Is there a way that I can accomplish this with just 1 css file?

header {
  color: white;
  background-color: red;
  text-align: center;
}

<header>
  <h1>header</h1>
</header>
<div id="page1">
  <p>page content</p>
</div>

Here's an example of a page that might be on my website. Let's say I have another page where the page has an id "page2." How can I dynamically have the background updated based on what the id of the div is? Is this possible? If not, is there an easy workaround to accomplish the desired result?

I would recommend adding a page-specific class to your header and styling the various classes. — Rafael, Feb 27 '21 at 01:12
@Rafael thank you for the input. The issue is that I am building the site with Django and my header is part of the base template, so I'd then have to find a way to update the classes for each page. — YangTegap, Feb 27 '21 at 03:49

score 0 · Accepted Answer · answered Feb 27 '21 at 01:11

0

You can't do that just with css, you will need something like .prev() in jquery to achieve that. Related discussion

answered Feb 27 '21 at 01:11

ccarstens

419
3
13

Thank you for the direction and for pointing me to this thread. I'll need to learn some jquery! – YangTegap Feb 27 '21 at 03:51
Yup! I have confirmed, this was exactly what I needed! Thank you! – YangTegap Feb 27 '21 at 04:00

Update header color based on page content

1 Answers1