Sunday, September 26, 2010

The difference between a and a:link

Many designers don’t realize the difference between the selectors a and a:link in CSS.
Essentially, the a selector styles all anchors, but a:link styles only those that are clickable
links (i.e., those that include an href attribute) that have not yet been visited. This means
that, should you have a site with a number of fragment identifiers, you can use the a:link
selector to style clickable links only, avoiding styling fragment identifiers, too. (This prevents
the problem of fragment identifiers taking on underlines, and also prevents the
potential problem of user-defined style sheets overriding the a rule.) However, if you
define a:link instead of a, you then must define the visited, hover, and active states,
otherwise they will be displayed in their default appearances. This is particularly important
when it comes to visited, because that state is mutually exclusive to link, and doesn’t
take on any of its styling. Therefore, if you set font-weight to bold via a:link alone, visited
links will not appear bold (although the hover and active states will for unvisited
links—upon the links being visited, they will become hover and active states for visited
links and will be displayed accordingly).

No comments:

Post a Comment