Question about .single-post css

jwilkins.oboe · February 10, 2021, 9:15pm

HI there!

I was reading a FCC news article on CSS hacks and I had a question about No.4

Here is the article: 10 CSS Hacks Every Developer should Know

It says

If you want some of your page posts to look different from others, you can use the .single-post script to override the site’s CSS style.

Here is the example it provides:

.single-post .entry-title {
font-size: 24px;
font-weight: 750;
color: red;
}

How does this work exactly?
How is this different from just creating my own class, adding some styles to it and applying it to those HTML elements?

When I tried researching online, all of the results were in the context of wordpress.

Does this work outside Wordpress?

Maybe I am just missing something basic but if someone could clarify things that would be great.

Thanks!

bbsmooth · February 10, 2021, 9:20pm

Maybe the author meant to say:

“… you can use the .single-post ~~script~~class to override the site’s CSS style.”

In other words, add the class .single-post to a parent container and then you can use more specificity to style just posts in that container.

I’m just guessing here. There is no other other mention of single-post in the article so I’m not sure what he is referring to.

jwilkins.oboe · February 10, 2021, 9:24pm

Ohh ok that makes sense.

I didn’t know if .single-post was something common that professionals use.
So I figured I would ask.

Thanks!

bbsmooth · February 10, 2021, 9:26pm

I’ve been searching for single-post and single-post script and nothing is coming up for me. I guess it could possibly be specific to some CMS? The article just isn’t giving me a lot to go on.

cherylm · February 11, 2021, 4:37am

As soon as I saw the code .single-post, I thought “oh, it’s WordPress.” I have some experience with it, and see that a lot.

jwilkins.oboe · February 11, 2021, 4:59am

Hi @cherylm !

So it is just a wordpress thing?

If so the author needs to say that because it is not clear in the article.

I wasn’t sure if it would be used outside of wordpress. But I guess not.

Thanks for your response!

cherylm · February 11, 2021, 6:27pm

I’ve only seen it in wordpress. That instruction sure sounds like the author is talking about a WordPress site. In WordPress, a page is another type of post. If you inspect a WordPress site, there’s all kinds of weird class names like .blog-layout-standard, .su-note-inner and so forth.

jwilkins.oboe · February 11, 2021, 6:36pm

Awesome thanks!

I opened up a github issue and they said they would take a look into the issue.

Thanks again!

rickstewart · February 12, 2021, 2:52pm

Hey @jwilkins.oboe

Just to add to what has been said, WordPress usually has one or maybe more pages devoted to displaying blog posts, usually showing just an excerpt. If you click on one of the posts a new page will open up displaying the entire blog post. On this page WordPress adds the class “.single-post” to identify the page as such.