Headings color settings for specific pages

[Alec]

Hello,

I’d like to set up headings (mainly h2, h3) for specific pages without affecting the site’s global color settings. Should be simple but I’m stuck on this somehow (I checked this everywhere but failed to find a way…)

1. Part A of the site is set to light text (#cacaca) on a dark background (#222) globally for about 15 static, events (Event Calendar) and Post List (WPSP)

2. Part B of the site is set to dark text / white background for the posts, archive pages, Woo and a couple of more pages (CSS)

3. I changed headings for Part A to #fff via Customizer to make the headings stand out ( https://prnt.sc/txerke )

4. I want to target headings for Part B via CSS but could not succeed.

5. I could change h2, h3 manually (I’m using GenerateBlocks) for the main dark bg pages with Block editor and leave Part B of the site intact (#333 for text and h2, h3).

But maybe there is a way to change h2, h3 of the specific multiple pages via CSS?

Meanwhile, this is what I have for the B part of my site:

/*white backgrounds for posts, archives, Woocommerce, cart, checkout & some pages*/
.single-post, .category, .tag, .woocommerce, .page-id-1234, .page-id-5678 {
background-color: #fff;
}
/*white backgrounds-dark text for posts, archives, Woocommerce, cart, checkout & some pages*/
.single-post .container, .category .container, .tag .container, .woocommerce .container, .page-id-1234 .container, .page-id-5678 .container, .page-id-6700 .container, .page-id-15252, .page-id-15680 .container, .page-id-10649 .container, .page-id-19886 .container {
background-color: #fff;
color: #333333;
}

I tried this but I guess I’m missing something because it doesn’t seem to work:

.single-post .container h2, h3, h4, h5, h6 {
color:#333;
}
.page-id-1234 .container h2, h3, h4, h5, h6 {
color:#333;
}

Thanks in advance,

Alec

GPP, GB, WPSP, LWSI

[Leo]

Hi there,

You need to actually repeat the full selector like this:

.single-post h2, .single-post h3, .single-post h4 {
   color: #333;
}
.page-id-1234 h2, .page-id-1234 h3, .page-id-1234 h4, .page-id-1234 h5, .page-id-1234 h6 {
    color:#333;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alec]

Thank you!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts