I’m designing a page where all text links need to have a little icon next to them to help denote that they’re links. So my CSS (simplified) looks like this:
background-position: left center;
The padding-left bumps the text over so that it isn’t sitting on top of the link icon.
The problem is that sometimes I have other icons that are contained in links (like, for example, a document icon denoting a download), but I don’t want the link.jpg icon next to it. In such a case, my HTML looks like this:
Is there any type of CSS selector where I can say, "if an image is contained by a link, style that parent link like X?"
I realize that I could just make a separate class that doesn’t have the background image and apply it to every link that contains an image, but it would be much cooler if this could be done automatically. Is it possible? Does anyone know? :lol:
Wow…how did you find that page? Not only does he describe my problem exactly (with the same example of an image inside a link, no less), but his proposed syntax (a < img) is actually what I was thinking you should be able to do!
I’ll definitely check out the jQuery solution since I’m already using that anyway (for Thickbox functionality). I came across this page in the comments: http://ejohn.org/blog/qualified-selectors-in-jquery/ – it shows you how to use jQuery’s :has(); to pull the effect off, but goes a step further and lets you call it through Shaun’s proposed syntax. Thus you could write "a < img" and it would work how he proposed. Awesome!