CSS Link Psuedo-Class Order

I'm forever forgetting what order link
pseudo classes need to appear in. Here's an
article that describes the issue:

Order of Anchor Selectors in CSS

Here's another that describes the same
issue:

CSS Pseudo-classes

OK. I'm starting to see that this is really
just a matter of a few simple rules. Here's
how I see it:

1. The :link pseudo class should
   come first as this is the most virginal
   of all the pseudo classes. Before a
   link is anything else, it is a link
   and only a link.
2. Next should come the :visited pseudo
   class. Visited is the next most virginal
   in the sense that a link need only be visited
   once to become a visited link.
3. The next most virginal of the pseudo
   classes is :hover. Whereas a link can only
   be transformed to a visited link once, a link
   can be transformed via a hover many times.
4. The least virginal, and therefore the last
   pseudo-class, is the :active pseudo class. The
   :active pseudo class can only become active if
   you press down on your mouse. However, prior
   to pressing on the mouse, you have to get there.
   If you've already gotten there, you have already
   hovered. Therefore, :active is the least virginal
   of all the link psuedo classes

This is all about precedence. You should not
have one psuedo class precede another unless it
actually precedes the other in time.

On the carpet of time, a link is a link before
it is anything else.

Next on the carpet of time, a link becomes an
visited link. While this may not seem right
at first, it is right because the difference
between a link and an visited link is really a
rite of passage. Once the link becomes visited,
it never looks back.

Hence, you really only have two choices for the
initial state of the link. Either the initial
state is :link (colon link) or it is :visited (colon
visited). There are no other initial states for
links. Therefore these two states must follow
each other.

Obviously, :link (colon link) should come before
:visited (colon visited). Obviously a link is
a link before it is a visited link.

The next two states for a link are also fairly
obvious. Prior to pressing the mouse, you must
first hover. Therefore :hover (colon hover) comes
before :active (colon active).

Here's a mnemonic that helps me to remember all
of this:

LVHA

Here's a phrase I use:

Las Vegas Hotel Accommodations

Not a great mnemonic but not too bad either.

To summarize, these two pseudo classes must
come first because they represent a rite of
passage that is never repeated:

• :link
• :visited

These two pseudo classes must come second
because they represent transitions that happen
over and over again:

• :hover
• :visited

The first transition is a one-time event only.
The second transition happens over and over again.

Once you make the permanent transition come before
the repeating transition, the rest is easy.

I characterize the pseudo classes as interfering
with each other because of a precedence issue.
Actually, it is more of an ovverride issue.

With precedence, one thing takes place before
another. That's part of the issue.

The real issue is that the psuedo-class that
appears last overrides all of the others. When
you use LVHA order, the :active pseudo class
overrides all the other classes if there is a
conflict.

I'm not sure why the pseudo classes come in
conflict with each other. I think of them
as atomic states that should not really be
interfering with each other. The fact that
they do interfere with each other tells me
that I have a ways to go in my understanding.

Ed Abbott