Style External Links with CSS
Styling external links is a common practice on most informational sites likes Wikipedia. As a user, it's nice to know when you're being sent to another resource. Many sites do the external links check on the server side, adding a `rel=external` attribute value or `external` class to external links. In some cases that isn't possible or plausible. After trolling around the interwebs, I found the following useful CSS snippet for styling external links:
/* long version */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]),
a[href^="//"]:not([href*="mysite.com"]), {
}
/* shorter version! */
a[href*="//"]:not([href*="mysite.com"]) {
/* external link styles, use :before or :after if you want! */
}
First you have to qualify the start of the link, then qualify the domain. Internal links wont match and external links wont match the comparison. A useful snippet and something to keep in your library in case you need it!
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![Implementing Basic and Fancy Show/Hide in MooTools 1.2]()
One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to...
![Duplicate the jQuery Homepage Tooltips]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
The amount of jQuery required to duplicate this effect is next to nothing; in fact, there's more CSS than there is jQuery code! Let's explore how we can duplicate jQuery's tooltip effect.
The HTML
The overall...
What if there is a link in my website like http://external.com/?referer=mysite.com ?
You add can another pattern match for whichever referer pattern you use:
a[href*="?referer"] { /* external styles */ }Thanks for the snippets :)
David, you can do the same with shorter selector:
[href*="//"]:not([href*="mysite.com"]) { }Thanks for the code :)
Nice snippets, I love this but how about browser compatibility?
So, what styles are typically used for external websites? A change in font color? Background color?
Is have used this slidely different for my wordpress site:
/* show external links differently */ a[href^="http://"]:not([href*="mydomain.com"]):before{ content: " "; width: 16px; height: 16px; background: no-repeat url('images/link.gif'); padding-right: 1.2em; }How to ignore Links With images?
example: http://jsfiddle.net/Ridermansb/NRw97/1/
@Riderman You don’t. CSS is designed to to be applied in one traversal of the DOM tree. This limits it to selectors that are based solemnly on what was before (higher up) in the dom tree. You cannot select on what comes after/deeper in the DOM tree in CSS.
In your example you are trying to style an a element based on the fact, that an img element is deeper in the tree.
Solution: use a css-class for such a elements that should ignore the styling done through the [href=??] matching selectors.
a.no-external-link-style {
/*undo styling through a[href*=”//”]:not([href*=”mysite.com”]) */
}
@Riderman Use JS / jQuery to add a class to links that wrap images, then add a css rule that removes or hides your
:before, based on that class. I’m using:after, and FontAwesome..jQuery('a img').parent().addClass('linked-img');a[href*="//"]:not([href*="mysite.com"]):after { font-family: FontAwesome; content: "\f08e"; font-size: 13px; color: #ccc; padding-left: 7px; } a.linked-img:after { display: none; }