Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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/

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading