Re: Selector for tags with a certain child.

On Wed, Oct 8, 2008 at 2:52 PM, Keiji Ikari <kei@teamikaria.com> wrote:

>
> 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.


Have you tried:
a img {
  vertical-align: bottom;
}
This will stop the color from showing below your images, since that comes
from images being normally aligned to baseline rather than bottom.

Of course, if you're using transparency in your images, you'll still have a
problem.

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.


In the Generated and Replaced Content Module[1] there is the ::outside
pseudo-element, which is what I think you're asking for.  It just happens to
generate the pseudo-element around the *outside* of the element, rather than
around the inside.

[1]: http://www.w3.org/TR/css3-content/#wrapping

~TJ