4

I am going to apply a link style to my site so external links will have an icon next to it, however I am having issue where the footer image link also changed when applying, if there a way to avoid this?

CSS

a[href^="http://"] { 
background: url( https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif ) center right no-repeat;
padding-right: 16px;
}
nsic
  • 153
  • 2
  • 14

2 Answers2

1

I think is not possible to assign an selector to a parent base on their children elements, check this answer in SO Apply CSS styles to an element depending on its child elements. you want to apply to all <a>link</a> but exclude <a><img src='' /></a> thats not possible

but you can try maybe to do:

a[href^="http://"] {
  /*do your stuff*/
}

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

that should works. btw you are missing https:// in your selector

Community
  • 1
  • 1
ncubica
  • 7,276
  • 7
  • 50
  • 67
0

UPDATE

Upon finding and evaluating the site itself, I have the a solid solution:

  • Place this style block at the end of <head></head>...
  • ...or place it in the stylesheet: styles.css.
  • Search for "navigation" and place after the last ruleset that starts with #navigation...
  • Do not include the tags if in a stylesheet.

  • The tags are for HTML page only: 

    <style>
  #navigation a::after {
     content: url(https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif);
     position: relative;
     top: 5px;
     left: 3px;
  }
</style>

    Note: Alternative selector is:a.navmenuitem::after

Review the PLUNKER

OLD

The obvious solution is to use class selectors. If editing the HTML is not possible, try using type selectors. In your case if you want to exclude the anchors that are in the footer try this:

footer a { background:none !important; }

OR

footer a[href^="http://"]  { background: url(https://cdn1.iconfinder.com/data/icons/web-page-and-iternet/90/Web_page_and_internet_icons-14-128.png) no-repeat 20px 20px;

SNIPPET

a[href^="http://"] {
  background: url(https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif ) center right no-repeat;
  padding-right: 16px;
  margin: 10px;
}
footer a[href^="http://"] {
  background: url(https://yourescape.ldara.com/_resources/images/content/icon_link.png) center right no-repeat;
  padding-right: 20px;
}
<header>
  <nav>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
  </nav>
</header>
<section>
  <aside>
    <a href="http://example.com/">ASIDE</a>
    <a href="http://example.com/">ASIDE</a>
  </aside>
</section>
<footer>
  <a href="http://example.com/">FOOTER</a>
  <a href="http://example.com/">FOOTER</a>
</footer>
zer00ne
  • 31,838
  • 5
  • 32
  • 53
  • Thanks for the information, the code some how has removed the original img for the footer all together. – nsic Nov 22 '16 at 04:44
  • If you have a different image for the footer anchors, all you need to do is use the image as is, see update. – zer00ne Nov 22 '16 at 05:43
  • thank you, the footer has its own style with list of icon img associate with organization link, is there a way to get around this? – nsic Nov 22 '16 at 21:48
  • See update, the [Plunker](http://embed.plnkr.co/xUJGTdhvE0x4GWyGF5oW/) is a rough replication of the navbar and footer of your site so there's a few differences in style. If you use the ruleset I have provided and you place correctly, it's 99% chance of success. – zer00ne Nov 23 '16 at 05:36