Question about adding external link icons to absolute links

[MacLovin23]

Okay, so I've added this code, and everything works fine:

a[href^="http:"] {
	background: url(images/externallink.gif) no-repeat right top;
	padding-right: 10px;}

But, I don't want this icon to show up on images that have absolute links tied to them. I tried the following, but it doesn't work:

a img[href^="http:"] {
	background: none;}

I know this method will work, but I know I'll end up a ton of image links down the road:

a[href^="http://www.someabsolutelink.com"],
a[href^="http://www.someabsolutelink2.com"]
{
  background: none;
  padding-right: 0;}

 

[angelwatt]

img has src not href

a img[src^="http:"] {
	background: none;}

Though, you may want,

a[href^="http:"] img {
	background: none;}

 

[MacLovin23]

Hi angelwatt. Thanks for the response. I tried both suggestions, I emptied the browser cache, and restarted, and the icon is still showing up next to the image.

 

[angelwatt]

Ah, right, I get it. What you really need is

img < a[href^="http:"] { background: none; }

which would mean img is a child of a[...], and apply the style to the a. Unfortunately, you can only do it the other way (a>img) as this way doesn't exist. It's one of the missing components in CSS selectors. You would have to use JavaScript to find the ones you don't want it applied to. I generally give external links a class of "external" and use CSS to style, but that is cumbersome too.