Override Anchor > Image Behavior with CSS

Question

Note: I asked a similar question 5 minutes ago, however this is not the same...

I have this CSS-rule to underline links without striking through any of the letter's "foots":

a:hover, a:focus, a:active {
    color: #3b234a;
    border-bottom: 1px #ccc solid;
}

Now this works as expected, however I want to write a rule that disable this behavior on linked images as this one:

<a href="#"><img src="..." /></a>

Is it possible?

Thanks.

Answer 1

Try

a:hover img { border-bottom: none; }

Answer 2

Apply a class to your href and remove the border on that class.

Basically you're always going to have to come at this with the parent element in mind because that's the direction that CSS is parsed in.

You can move backwards from child to parent if you use jQuery or similar, but vanilla CSS can't handle what you want it to do in this situation.

Answer 3

Add a class "imageLink" or whatever you like to anchors that hold images then:

a:hover, a:focus, a:active {
  color: #3b234a;
  border-bottom: 1px #ccc solid;
}

a.imageLink:hover, a.imageLink:focus, a.imageLink:active {
   border-bottom: none;
}