Looking for CSS selectors to only affect blog posts

Hi all,

My blog posts are inheriting their styles from the global styles, and i need to find the CSS classes to apply CSS that will only affect blog posts. The reason is site-wide I have a transparent header with white menu items and a white logo, which changes to green background once scrolling starts. Each page has a hero image at the top of its page, which allows all that to work and look good. 

Since I cannot add a new section at the top of a blog post, I have a transparent header with white text and a white logo on top of the white top of blog posts. I have the CSS for the style, but am having trouble isolating the selectors to only affect the blog posts.

Typically - in WordPress - I would easily find a class for the body that is common to all blog posts, and nothing else on the site. That is what I am looking for here. Does anyone have any advice? I see 56 instances of the word "blog" in the classes for the body on a blog post page, and 55 for another non blog post page. Any idea what that extra class is?

Hi,

Can you share link to a blog post?

Absolutely! https://www.thespiritualpilgrim.com/blog/why-pilgrimage

On 2/27/2023 at 9:03 PM, ben_blue said:

Absolutely! https://www.thespiritualpilgrim.com/blog/why-pilgrimage

Add this to Design > Custom CSS

/* Blog Posts Header */
body[class*="type-blog"].view-item {
	header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header div.header-nav-item a {
    color: black !important;
}
}