Question

I’d like to be able to target text links in CSS with border-bottom on hover,
but have all links that are images not have a border on hover. So:

<a href="#"><img src="image.png"  /></a>  ==> this should not have a bottom-border on hover
<a href="#">regular text link</a> ==> this should have a bottom-border on hover

I tried this CSS:

#sidebar a:hover {
  border-bottom: 1px dotted red;
}
#sidebar a:hover img {
  border-bottom: none;
}

But this doesn’t work…the anchor has to be targeted rather than the image, I think. I’ve been hunting around Google and no one seems to know how to do this except by targeting the image link with a specific class or id, or using display:block.

But, I can’t use these solutions since the content is in a CMS so I don’t want the user to have to assign a class to each image they insert. And display:block won’t work because I don’t know if that would be appropriate for every image the user wants to display.

Finally, I’d like to be able to do this in plain CSS (no Javascript). Perhaps there’s no way…but any help or ideas you have would be greatly appreciated!

Answer 1

Sorry, what you’d want is some kind of :parent pseudo-class that selects the child but applies to the parent, which unfortunately does not exist (not even in CSS3).

You’d have to do a bit of Javascript, selecting all elements matching #sidebar a:hover, then applying the red bottom border on the condition that they don’t have a child IMG element.