using CSS3 selectors to stylize internal and external links
Visitors to this site who are using Mozilla may notice that hovering over an external link is one color, but internal links are another. (update: this site layout changes so frequently, this may no longer be in effect. But the following might still be relevant). It’s done using CSS3 selectors, which only a few browsers currently support.
In your CSS style declarations, instead of using this:
a:hover {
background: yellow ;
}
replace it with this:
a[href^="http://www.yourdomain.org"]:hover{
background: yellow ;
}
What this does is apply a specific style only to links in your domain.
External Link Icons
A common use for CSS3 selectors is to differentiate between internal and external links using an icon. Some folks create their own icons to signify external links, but what’s quickly becoming a standard is the “box-arrow” icon seen on Wikipedia and Brad Choate’s webpage.
Here’s what the code would look like:
/* external link style */
a[href^="http:"] {
background: url(/path/to/your_external_icon.jpg) right center no-repeat;
padding-right: 20px;
}
a[href^="http:"]:hover {
background: url(/path/to/your_external_icon.jpg) right center no-repeat;
}
/* internal link style with "www" */
a[href^="http://www.yourdomain.com"] {
background: transparent;
padding-right: 0px;
}
a[href^="http://www.yourdomain.com"]:hover {
background: transparent;
}
/* internal link style without "www" */
a[href^="http://yourdomain.com"] {
background: transparent;
padding-right: 0px;
}
a[href^="http://yourdomain.com"]:hover {
background: transparent;
}
You’ll notice I applied a style to all links beginning with “http:” i.e. all links. Then I applied a specific style to links pointing to one specific domain.
Note that I made a point to separate out links to http://yourdomain.com and http://www.yourdomain.com . This is a catch-all, in case you are inconsistent with your linking, as I often am.
Personally, I don’t like the idea of inline icons intermingled with text, but from a usability perspective it makes sense to tell your visitors where a link takes them before they choose to click on it. For me, I’ll stick with hovering as a way to distinguish whether a link is internal or external.
Additional Uses
- alert you of incorrect markup, e.g.
img[title=""]{border: 20px solid red;} - distingush FTP links from regular HTTP links
- call out a link to search google
- consistent permalink styling
Sadly, the support for CSS3 selectors is limited, so remember to include normal styling for those visitors using older browsers.
For more info
Reference: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#changesFromCSS2
0 Comments
No comments yet.
RSS feed for comments on this post.