Question about adding external link icons to absolute links

Discussion in 'Web Design and Development' started by MacLovin23, Jul 17, 2009.

  1. MacLovin23 macrumors newbie

    Joined:
    Jul 17, 2009
    #1
    Okay, so I've added this code, and everything works fine:
    Code:
    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:
    Code:
    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:
    Code:
    a[href^="http://www.someabsolutelink.com"],
    a[href^="http://www.someabsolutelink2.com"]
    {
      background: none;
      padding-right: 0;}
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    img has src not href
    Code:
    a img[src^="http:"] {
    	background: none;}
    Though, you may want,
    Code:
    a[href^="http:"] img {
    	background: none;}
     
  3. MacLovin23 thread starter macrumors newbie

    Joined:
    Jul 17, 2009
    #3
    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.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Ah, right, I get it. What you really need is
    Code:
    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.
     

Share This Page