Use CSS to affect an outer element

This is hard to sum up in a title, so forgive me.

Basically, 开发者_开发知识库here is what I have:

a img {
/ * style * /
}

However, I want to affect the a tag in this instance. Is there any way to do so in CSS without resorting to JavaScript wizardry?

Unfortunately the cascading in CSS only goes one way. From your example, I'm guessing you are trying to do something like this:

<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->

<a>Hello</a> <!-- This A is normal -->

Most developers would accomplish it by simply adding a class.

<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->

Even better, use that class to make the icon a background image and add padding.

<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>

<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>

Put all your icon images into classes too and you have some pretty clean HTML!

You want to apply styles to the tag only if it has an image correct? In short, using straight CSS there is no way to do that.

EDIT

BUT, if you wanted to do this w/ jquery you could do it like so:

$('a').has('img').addClass('hasImg');

then use .hasImg as your hook

a.hasImg{background:lime;display:block;height:200px;width:200px;}

Here's a demo on JSBin I put together (view source): http://jsbin.com/owafi4

CSS selectors can not ascend. It is a limitation of the language.