Question

I have a link like:

HTML:

<a href="#" title=""> <img src="stack.png" alt="" title="" /> stackoverflow </a> 

CSS:

a { text-decoration: underline}

I want to remove the underline from the image.

I tried:

a img {text-decoration:none} 

But it not works.

BS:
I can do that if I added a display:block to img but that can cause a damage for the rest of the site, also I won’t add a specific class for this section.

Could I do that with jQuery?

Answer 1

You should do this with CSS.

You could add an inline style to that link:

<a href="#" style="text-decoration:none;"> <img src=...etc /> stackoverflow </a>

Or you could add a class to that link:

<a href="#" title="" class="img"> <img src=...etc. /> stackoverflow </a>

In your css...

a.img {text-decoration:none;}

EDIT:

If you cannot alter the html, then use jQuery:

$('a img').parent().css('textDecoration','none')

(This is similar to what is above, but targets the parent of the img — that is the a — and then changes the style appropriately.)

Fiddle http://jsfiddle.net/jasongennaro/vM55K/

EDIT 2:

If that is the only child element in an a, you could use this:

 $('a').children().css('textDecoration','none')

Fiddle http://jsfiddle.net/jasongennaro/vM55K/1/