:hover border on links but NOT images possible?

On my personal website (http://chrisblackwell.org) I made all my links have a border-bottom: 1px on a:hover instead of text-decoration because I like the way I can control the padding this way.

The big HOWEVER with this method is that all my images that have links also get this property. I’ve tried the following variations but nothing seems to turn off the border on the hover over state:

a:hover img { border: 0; }
img a:hover { border: 0; }
a:hover img { border: 0; !important }
a:hover > img { border: 0; }

If anyone has any idea on how to fix this without putting a class on each image I would be very grateful.


There is no point in addressing the image because you put the border on the anchor :). The image doesn’t have a border

You could use JS to find parents of images that are links and adjust the class or you could try the negative margin bottom trick as shown by Erik in this thread:

That’s about the only solutions other than adding classes as required.

Shoot, I was afraid that was the case. This seems like something that should be added to CSS3, or is it? The ability to target sub-items from within a parent selector

There is no way to achieve this by CSS alone, without a bit of hackery.

If each link only contains images or text, you can solve it by putting a class on the links that contain images (or text, whichever you have fewer of).

If some links contain text and an image, you can wrap a <span> round the text and style that rather than the link itself.

If you don’t want to do either of those and your images don’t have a transparent background, you can use position:relative; to shift them downwards so that they overlap the border and hide it. If you don’t want to actually move the images, you can use padding and set a background-color on the images to simulate the effect.

It’s been on many wish lists but apparently it would be too code intensive and hamper the cascade (like trying to make some of the waterfall go back uphill :)).