Jump to content

Looking for CSS selectors to only affect blog posts

Recommended 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?

Link to comment
  • Replies 3
  • Views 810
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.