Applying CSS to <a that has no <img child - css

Question

I am using a special link effect on <a> tags with the background-image: CSS. The links look nice but the website also contains a lot of <img> that are links, which also get the CSS.
I am currently solving the issue with jQuery: $("img").parent().css("background", "none");
Is there any correct way of doing this with CSS, getting this CSS not to affect tags.
Code:
a:link ,a:visited {
text-decoration: none;
background-image: url(/underline.png);
background-repeat: repeat-x;
background-position: bottom;
}

Answer 1

CSS4 defines the following syntax:
!a>img {background-image:none}
However, as far as I'm aware no browser supports it yet. It's also not final on where the ! goes, as a!>img and !a!>img all have been suggested.
So, basically, there is no CSS solution for this. However, there is a "hack" solution.
Assuming body {background:white}, you can do this:
a>img {background:white}
This will cover up the link's background with a white one, which essentially hides it. Adjust the colour as needed. Note that this won't work if your content area has a background image...

Answer 2

When I saw this: background-image: url(/underline.png); I got very nervous. Is there some special effect you need to employ here? What's wrong with the underline property in CSS?
To solve this in CSS2 you'll need to redesign your code. Therefore, this might be a bit impractical.
Keep your css code for links.
Then wherever you have a link with an image in there, you should add a class. Use this class to link CSS that overrides the typical behavior.
There is no way to do what you want in current CSS capabilities. Jquery works but it is afterall a hack.
a {
code here that you want
}
a.img {
override properties
}
<!-- Html -->
Normal Text
<a class="img" href="#"><img src="image.png" width="x" height="y" alt="" /></a>
Some food for thought -> The reason CSS does not support what you seek is because a child should not define a parent's style! AFterall, we (as people) do not define our parents' traits but we surely override what we inherited.

Answer 3

What would be the difference in your links ?
Domain, peticular folders, extension name , etc...
I asked cause you could filter them by url.
[href~=picto] will mathch if url contains picto or something similar
[href^="image/] will match any url begining with image/whatever_is_behind_or_not
[href*="image/] will match any url containing image/
[href$=".jpg"] will match any url ending with this .jpg extension
As you can see , there's nowdays lots of option , level4 will make it much easier though :)

Answer 4

Well, unless I am missing something, the solution to this is rather simple.
On a website I worked on I used the following two CSS rules to differentiate between linked text effects and linked image effects:
a:link {
/* rules for linked text effects */
}
a img {
/* rules for linked img effects */
}