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

<pre class="lang-css prettyprint-override"><code>div.post .text a[href^="http:"]
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}
</code></pre>

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

[{'answer_id': 59448, 'author': 'Thunder3', 'author_id': 2832, 'author_profile': 'https://Stackoverflow.com/users/2832', 'pm_score': 1, 'selected': False, 'text': '<p>It might be worth it to add a class to those <code>&lt;a&gt;</code> tags and then add another declaration to remove the background:</p>\n\n<pre><code>div.post .text a.noimage{\n   background:none;\n}\n</code></pre>\n'}, {'answer_id': 59454, 'author': 'scunliffe', 'author_id': 6144, 'author_profile': 'https://Stackoverflow.com/users/6144', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n\n<pre class="lang-css prettyprint-override"><code>a &gt; span {\n  background: url(../../pics/remote.gif) right top no-repeat;\n  padding-right: 10px;\n  white-space: nowrap;\n}\na &gt; img {\n  /* any specific styling for images wrapped in a link (e.g. polaroid like) */\n  border: 1px solid #cccccc;\n  padding: 4px 4px 25px 4px;\n}\n</code></pre>\n'}, {'answer_id': 59469, 'author': 'gz.', 'author_id': 3665, 'author_profile': 'https://Stackoverflow.com/users/3665', 'pm_score': 0, 'selected': False, 'text': '<p>You need a class name on either the <code>a</code> 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:</p>\n\n<pre class="lang-css prettyprint-override"><code>a.external_link\n{\n    background: url(../../pics/remote.gif) right top no-repeat;\n    padding-right: 10px;\n    white-space: nowrap;\n}\n</code></pre>\n\n<p>It would be possible with XPath to create a pattern like yours that would also exclude <code>a</code> elements that had <code>img</code> children, however this facility has been repeatedly (<a href="http://lists.w3.org/Archives/Public/www-style/2002May/0011.html" rel="nofollow noreferrer">2002</a>, <a href="http://lists.w3.org/Archives/Public/www-style/2006Oct/0009.html" rel="nofollow noreferrer">2006</a>, <a href="http://lists.w3.org/Archives/Public/www-style/2007Apr/0105.html" rel="nofollow noreferrer">2007</a>) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.</p>\n\n<p>So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the <code>href</code> 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.</p>\n'}, {'answer_id': 59511, 'author': 'rpetrich', 'author_id': 4007, 'author_profile': 'https://Stackoverflow.com/users/4007', 'pm_score': 3, 'selected': True, 'text': '<p>If you set the background color and have a negative right margin on the image, the image will cover the external link image.</p>\n\n<p>Example:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>a[href^="http:"] {\r\n  background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;\r\n  padding-right: 14px;\r\n  white-space: nowrap;\r\n}\r\na[href^="http:"] img {\r\n  margin-right: -14px;\r\n  border: medium none;\r\n  background-color: red;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="http://www.google.ca"&gt;Google&lt;/a&gt;\r\n&lt;br/&gt;\r\n&lt;a href="http://www.google.ca"&gt;\r\n  &lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" /&gt;\r\n&lt;/a&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>edit: If you\'ve got a patterned background this isn\'t going to look great for images that have transparency. Also, your <code>href^=</code> selector won\'t work on IE7 but you probably knew that already</p>\n'}]
['https://Stackoverflow.com/questions/59423', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1683/']