I have a link icon next to each link. How do I exclude the link icon from images?

Question

I've got the following in my .css file creating a little image next to each link on my site:

div.post .text a[href^="http:"]
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}

How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?

Answer 1

It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:

div.post .text a.noimage{
   background:none;
}

Answer 2

If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.

a > span {
  background: url(../../pics/remote.gif) right top no-repeat;
  padding-right: 10px;
  white-space: nowrap;
}
a > img {
  /* any specific styling for images wrapped in a link (e.g. polaroid like) */
  border: 1px solid #cccccc;
  padding: 4px 4px 25px 4px;
}

Answer 3

You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:

a.external_link
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}

It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.

So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.

Answer 4

If you set the background color and have a negative right margin on the image, the image will cover the external link image.

Example:

<style>
a[href^="http:"]
{
    background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
    padding-right: 14px;
    white-space: nowrap;
}
a[href^="http:"] img 
{
    margin-right: -14px;
    border: medium none;
    background-color: red;
}
</style>
<a href="http://www.google.ca"&gt;Google&lt;/a&gt;&lt;br/&gt;
<a href="http://www.google.ca"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png"/&gt;&lt;/a&gt;

edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already