Selector for tags with a certain child.

Hi,

I like to use the following style on most of my websites:
a {color: x; padding: 0px 1px;}
a:hover {color: y; background-color: x;}

where x is a foreground color and y is the background color of the container.

However, when adding w3c "valid" images (and other things, but this is
the main point I run into this "problem"), I then get a strip of color
x behind the image when it is hovered over for obvious reasons.

To counter this I currently add the following line of CSS:

a.nohover:hover {background-color: transparent;}

and then set the class of the <a> tags containing the images to "nohover".

What I would like to be able to do, though, is set a CSS rule which,
by some selector, would specify "all <a> tags containing an <img>
tag". It would have the effect of using the selector "a img" but then
applying the style to the parent of the <img> tag, not the <img> tag
itself. This would prevent me from having to modify the classes of
every image that was inside a link.

On a perhaps somewhat related note, I'd also like to suggest a
":child" generated content selector, similar to ":before" and
":after", except this time behaving as if a <div>...</div> (or
<span>...</span> for inline elements) were inserted around all the
content of the tag following the rule. In a lot of situations I need
to always nest one tag inside another and apply the same style to this
nested tag, which leads to HTML being more complicated than it needs
to be.

Received on Wednesday, 8 October 2008 19:53:09 UTC