HTML and CSS Reference
In-Depth Information
Order sorting is the reason behind the often-recommended ordering of link styles. The
recommendation is that you array your link styles in the order link-visited-hover-active,
or LVHA, like this:
:link {color: blue;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}
Thanks to the information in this chapter, you now know that the specificity of all of
these selectors is the same:
0,0,1,0
. Because they all have the same weight, origin, and
specificity, the last one that matches an element will win out. An unvisited link that is
being “clicked” or otherwise activated, such as via the keyboard, is matched by three
of the rules—
:link
,
:hover
, and
:active
—so the last one of those three declared will
win out. Given the LVHA ordering,
:active
will win, which is likely what the author
intended.
Assume for a moment that you decide to ignore the common ordering and alphabetize
your link styles instead. This would yield:
:active {color: orange;}
:hover {color: red;}
:link {color: blue;}
:visited {color: purple;}
Given this ordering, no link would ever show
:hover
or
:active
styles because
the
:link
and
:visited
rules come after the other two. Every link must be either visited
or unvisited, so those styles will always override the
:hover
and
:active
rules.
Let's consider a variation on the LVHA order that an author might want to use. In this
ordering, only unvisited links will get a hover style; visited links do not. Both visited
and unvisited links will get an active style:
:link {color: blue;}
:hover {color: red;}
:visited {color: purple;}
:active {color: orange;}
Of course, such conflicts arise only when all the states attempt to set the same property.
If each state's styles address a different property, then the order does not matter. In the
following case, the link styles could be given in any order and would still function as
intended:
:link {font-weight: bold;}
:visited {font-style: italic;}
:hover {color: red;}
:active {background: yellow;}
You may also have realized that the order of the
:link
and
:visited
styles doesn't
matter. You could order the styles LVHA or VLHA with no ill effect. However, LVHA
tends to be preferred because it was recommended in the CSS2 specification and also
because the mnemonic “LoVe—HA!” gained rather wide currency.
