Search code examples
csshyperlinksidebar

How to NOT target sidebar

I added CSS to add a specific style of underlining of hyperlinks in posts. I managed to make it work so the CSS wouldn't affected headers or footers. However, it does affect links in my sidebar, which I don't want. Both text and images in sidebar with links get underlining now.

How can I either 1) change this CSS so it would only affect the text in the blog posts or 2) exclude the sidebar from this CSS?

body.single.single-post .site-content a {
    box-shadow: inset 0 -0.4rem #EE841B8F
}

Live example: https://twoinrome.com/hidden-gems-in-rome/

I tried adding "not" to the css, but it didn't seem to work (or at least, not "my" way)

Solution

  • Two things.

    Your site is easy to read. But underlining hinders reading already.

    Then I found a way to only aim at the a at .primary.

    body.single.single-post .site-content .primary a {
    box-shadow: inset 0 -0.4rem #EE841B8F;
}