Skip to main content
Fear Goidte
Pronounced like “Far Gotcha”. The splendid online isolation of me, James Ó Nuanáin, wherein I gather together any loose cleverness that I manage to accumulate. This site is, primarily an exegesis on how it was made. For the moment, it is mostly beak and bone with very little feather and fur.
  1. Home
  2. Archives
  3. Copyright
  4. Access keys
  5. Web feed
  6. Colophon

Weigh anchor

Styling links

James Ó Nuanáin

Estimated reading time: five minutes

Tagged with

The web, and Wikipedia is a prime example, is a multitude of documents linked together. It does lots of other things, but mostly it’s links and documents. This is an abrupt note on stylesheet selectors for links and pseudo-conventions for styling them.

The selectors below, make use of attribute selectors with wildcards. Descriptions of these can be found at 6.3. Attribute selectors—W.3.C.’s Selectors Level 3.

Types

Links could be divided into the following broad types (and currently are being, by me):

Internal to the page

Search for any link element (a) with an href attribute that begins with “#”:

a[href^='#']
External and local

The way to distinguishing between external and local links depends on how your website is configured: whether you are using absolute links, relative links, or a mixture of both.

For absolute links, (assuming your server is “example.com”) the following selector will identify your local links:

[href*='example.com']

I have omitted the http since a page might be accessed over http or https. The * wildcard signifies that you are looking for an attribute that contains the quoted value ('example.com').

For relative links, the following will select external links:

a[href^='http']

For a mixture of absolute and relative links (which is the most likely scenario) and again assuming that your server is “example.com”, the following selector will select all external links:

a[href^='http']:not([href*='example.com'])

This is also the most fool-resistant approach. It searches for all links with href attributes that begin with “http” but don’t contain “example.com”.

Please note however that these approaches are not idiot-proof. For instance, you could still link to an internal document fragment using an absolute reference and the selector your mark-up matches will be the local one rather than the internal one.

Unless you’re playing silly-buggers with contact forms or some esoteric obfuscation, e-mail inks can be easily selected using:

a[href^='mailto:']
Downloadable resources

For downloadable resources you need to target the file extension such as for Portable Document Format files:

a[href$='.pdf']

The rel attribute

H.T.M.L.5 allows other types to be defined using the rel attribute(4.8.4 Link types—H.T.M.L.5).

Some of these are not for action by the website user such as rel="stylesheet" but the following are often worth highlighting visually:

To select these links:

a:[rel~=value]

Where “value” is one of the possible rel values above. The tilde above (~) allows rel to have multiple space separated values where one of them matches your value.

States

Links can be in the following states (ordered by C.S.S. specificity:

If you’re styling all the above states, the selectors should be in the same order:

a:link

a:visited

a:hover

a:active

For a brief, yet more informative discussion of the order of link state selectors, see: Link Specificity on Eric Meyer’s homepage.

Visual styling

Internal

Immediately followed by the section sign. There is no convention for an internal page link, but if there was one (and there should be) it should be the section sign. A convention that no one else abides by is no convention, unless … you screw your eyes real tight and wish it so.

Local

A plain link, no adornment.

E-mail

Immediately followed by an envelope icon which is in no way anachronistic to someone like me who insists on “e-mail”.

Downloadable resources

If you use routinely included particular kinds of downloadable files it is a good idea to indicate them with an icon immediately following the link. Regardless you should at least include the file extension as this will be transparent to all users.

External

Immediately followed by the usual external link arrow out of box icon.

General styling notes

Colours

The convention is that links are underlined and that unvisited links are of a blueish hue and that visited links are of a purplish hue. Those have been the default colours since the web began and are familiar to users of DuckDuckGo, Google, and Wikipedia amongst innumerable others. If you want people to learn a new colour scheme, just for your site … interesting.

Icons

It is best not to use icons to highlight the states since they can change whilst a user is on the page (:hover) and the document will need to reflow to accommodate them.

If you use icons for link types, try to make them small and unobtrusive. If you’re using unicode glyphs or &font-face with Font Awesome, IcoMoon &c. or similar try to ensure that the colour of the icon matches the link state—just to emphasize that the icon refers to that link rather than other adjacent text.