Preventing certain URLs from receiving external link styles

Question

I have styled any external links on my site to automatically add an icon after the link to any domain off my site using:

a[href^="http://"]:not([href*="website.com"]):after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

I have an image on the page that opens a lightbox with a Google Map in it, so the above code thinks it's an external link and adds the icon after the image. Is there a way to basically say links from anotherdomain.com, don't apply the style?

I tried adding maps.google.com to the option above, but it didn't work. I'm not sure if it supports multiple values?

Any help would be greatly appreciated! Thanks in advance!!

Does your current selector work? The lightbox is triggered by a `data-lightbox` attribute right? Add that to your selector: `a[href^="http://"]:not([href*="website.com"]):not([data-lightbox]):after` — GreyRoofPigeon, Jul 22 '16 at 14:38

score 0 · Answer 1 · answered Jul 22 '16 at 14:38

0

You might try using the :matches selector to identify the sites you want to match, and just style all others with your existing code, adding the icon after (so the inverse of your current approach).

a[href^="http://"]:after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

a[href^="http://"]:matches([href*="website.com"], [href*="otherwebsite.com"]):after { 
 }

Note: I haven't actually tried this.

answered Jul 22 '16 at 14:38

Daryl

124
3
11

2

No one has implemented :matches() except Safari yet. – BoltClock Jul 22 '16 at 14:42
aarrgh, ok, there's only partial support in other browsers. – Daryl Jul 22 '16 at 14:57
OK, it appears "Most browsers support this spelled as a prefixed :-vendor-any() pseudo-class" so it's possible to go this route. [link](http://caniuse.com/#feat=css-matches-pseudo) – Daryl Jul 22 '16 at 15:06
1

Those prefixes are useless because you'd have to [duplicate your rulesets anyway](http://stackoverflow.com/questions/27315604/compact-multiple-css-class-selection-criteria-with-or/27315685#27315685). You're better off just not using the pseudos at all and just going old-school, which makes for slightly less repetition. – BoltClock Jul 22 '16 at 15:12

Michael Benjamin · Accepted Answer · 2016-07-23T17:58:55.453

First, with most sites going the https:// direction, you may want to adjust your selector. Or consider adding an https:// option.

a[href^="http://www"],
a[href^="https://www"]

OR, more simply

a[href^="http"]

One method that I use to distinguish between links needing external styles, and those that do not, is making sure that external links on my sites have a www.

a[href^="http://www"]::after,
a[href^="https://www"]::after

... any other links (like your anotherdomain.com or maps.google.com) wouldn't match.

I say this is only one method because you still have to look out for websites needing external link styles that don't have a www (e.g., meta.stackexchange.com)

Another option is to simply override your original rule:

a[href*="maps.google.com"] { ... !important ; }

OR, more specifically in this case

a[href*="maps.google.com"]::after {
    font-size: 0 !important;
    padding-left: 0 !important;
}

Two general solutions to hide external styles on anchor elements are:

Create a class for this purpose:

.no-external-link-icon {
    background-image: none !important;
    padding-left: 0 !important;
}

Use scheme-less (or protocol-less) URLs:
```
//www.stackoverflow.com
```

Looks like this one did the trick! I do have an additional option for https://. :) But, I just added www. to the options, and it picks everything else up, but skips the maps.google.com links!! Thanks for the info!! The other above answers resulted in errors for me, so I'm not sure I had the syntax right? — , Jul 22 '16 at 15:14

score 0 · Answer 3 · answered Jul 22 '16 at 15:23

:not can be chained in an OR fashion by simply tacking it on one after the other.

/* chained :not syntax */
a[href^="http://"]:not([href*="website.com"]):not([href*="maps.google.com"]):after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

/* Demo purposes only */
a {display:inline-block;text-decoration:none!important;padding:0.75em;color:inherit!important;border:1px solid}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<a href="http://website.com">My Website</a>
<a href="http://google.com">Google</a>
<a href="http://facebook.com">Facebook</a>
<a href="http://maps.google.com">Google Maps</a>

Preventing certain URLs from receiving external link styles

3 Answers3