css - remove background from link when parent of image

I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result 开发者_开发百科is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )

How do i removed the background of links when it has an img as a child? I though that someting like this would work:

.featured_tutorial img < a

CSS does not support a parent selector.

You have to use classes like a.this_link_contanis_img{ /*override background*/ }

Or maybe you could set a new property to the img. This could hide the link's background.

.featured_tutorial img{ /*override background*/ }

Edit: Ok, that wont work in your case..

Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.

It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:

a img { display: block; }

or if you want the to stay displayed as inline

a img { vertical-align: bottom }

this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.

Hope it helps,

T.

As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it

http://jsfiddle.net/vrqCV/

jQuery(document).ready(function() {
    jQuery("a:not(:has(img))").addClass("bg");
 });

As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)

But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.