[Resolved] a element styling

[Dorian]

I am trying to style the a element, so that links look nicer and they are more enticing. Some of the links have a class, and with that class it’s really easy to style it. However most of the links don’t have a class, so I end up styling both text and images, which is not good.
My selector is .entry-content a which includes both text and images links.
Is there any way to style only the text?
My css would include border-bottom, color, background-color.

Thank you,

Dorian

[Leo]

Hi Dorian,

By any chance your site is live and we can see which links you are talking about?
You can also give the text links you inserted a specific class and target your CSS to that class as well.
Let me know.

[Dorian]

Hi Leo,

Thanks for helping with this.
The site is live. Here is a page: http://coffee-brewing-methods.com/espresso-coffee-maker/domestic-cappuccino-maker/
Note the difference between the links in the page, styled vs not styled. The styled ones have a class, so I can target them properly. THose are created using a plugin. The manually created links don’t have any class.

There are too many links on the website to change the class for all of them.

[Leo]

I”m assuming the links in red are the ones you want to style?
If so give this selector a shot? .entry-content a
Let me know.

[Dorian]

That’s what I am using now, but .entry-content a includes all links including images. I end up with underlined pictures and buttons.

[Leo]

What if you try .entry-content p > a?

[Dorian]

I think that did it. Thanks so much Leo.

[Tom]

Just to add, that’ll apply to all links that are a direct child of a paragraph 🙂

[Dorian]

Hi Tom,

Yes I discovered that linked images within paragraphs get the styling too. I can apply a class to the link with the image. I am looking at a way to do that automatically. If you guys have an idea, it would be awesome. As is is not too bad, if people hover with the mouse on images they’ll see my oversized background for a:hover.
Such as the infographic on this page: http://coffee-brewing-methods.com/super-automatic-espresso-machine-reviews/

Cheers,

Dorian

[Tom]

Hmm, not sure of a way to do it automatically I’m afraid, although you might find a function out there that will do it.

If most links need the styling, then applying a class to ignore it to other elements is the best bet. If only some links need the styling, applying a class to apply it to those links would be best.

[Dorian]

Yeah that was my thinking as well. I’ll figure out something.

[Author]

Posts