CODEWITHSUNDEEP
csshyperlinkhref
nsic
nsic

Reputation: 153

link style for external link

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;
}

Upvotes: 4

Views: 581

Answers (2)

zer00ne
zer00ne

Reputation: 43910

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>

Upvotes: 0

ncubica
ncubica

Reputation: 8485

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

Upvotes: 1

Related Questions