[Resolved] Custom CSS working on the wrong element

[Sasha]

Hello,

I have some custom CSS on my site to highlight/bold links in body text:

.entry-content a:not(.gb-button) {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content a:not(.gb-button):hover {
	box-shadow: inset 0 -1.5em #A3E4DA;
}

Unfortunately, this effect is being applied to GB post templates towards the bottom of my front page (URL below). How can I turn it off for the post templates but ensure entry content (in body text & image captions) remains unaffected?

Thank you!

[Ying]

Hi Sasha,

Try this:

.entry-content a:not(.gb-button):not(.gb-query-loop-item a) {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content a:not(.gb-button):not(.gb-query-loop-item a):hover {
	box-shadow: inset 0 -1.5em #A3E4DA;
}

[Sasha]

Thanks Ying! I entered that in but didn’t save, because I could see (in preview) that it added the highlight effect to the Social Snap sharing buttons at the top & bottom of each post.

[David]

Hi there,

are the links you want to style in a Paragraph?
If so, then you can do this:

.entry-content p a {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content p a:hover {
	box-shadow: inset 0 -1.5em #A3E4DA;
}

[Sasha]

Hi David – this highlight style would need to apply to links in entry paragraphs AND image captions. Any changes recommended for the CSS you shared?

[Fernando]

Hi Sasha,

Try this CSS instead:

.entry-content :is(p,figcaption) > a {
    color: black;
    font-weight: 700;
    box-shadow: inset 0 -0.5em #A3E4DA;
    transition: box-shadow 0.2s ease-in;
}

.entry-content :is(p,figcaption) > a:hover {
    box-shadow: inset 0 -1.5em #A3E4DA;
}

[Sasha]

Thanks Fernando! That seems to have done the trick 🙂

[Fernando]

You’re welcome Sasha! 🙂

[Sasha]

Sorry to reopen this thread, but I just noticed the highlight CSS effect is now not working in lists.

Could you please have a look?

[David]

Try changing it to:

.entry-content :is(p,li,figcaption) > a {
    color: black;
    font-weight: 700;
    box-shadow: inset 0 -0.5em #A3E4DA;
    transition: box-shadow 0.2s ease-in;
}

.entry-content :is(p,li,figcaption) > a:hover {
    box-shadow: inset 0 -1.5em #A3E4DA;
}

[Sasha]

Thanks David! I entered the new CSS & strangely it seems to have had no effect.

[David]

Thats because i was been stupid. I just edited the code above:

https://generatepress.com/forums/topic/custom-css-working-on-the-wrong-element/#post-2392667

[Sasha]

Haha, that worked perfectly. Thank you!

[David]

Glad to hear that!

[Sasha]

Hello again – so sorry to open this back up!

While the CSS is working well on links in regular body/list text, I’ve since noticed that it doesn’t work on bolded and/or italicized link text in body paragraphs or lists.

Please let me know if you might be able to help me make some modifications to the code. Thank you!

[Author]

Posts