Anochor: :link, :visited, :hover, :active, but what of :focus?

Where in the anchor pseudo-element order does focus belong?

[JAB Creations]

Where in the anchor pseudo-element order does focus belong?

:link
:visited
:hover
:active

- John

[Robin_reala]

I generally put it in the middle before :hover, but I'm not sure if I do that on purpose or out of habit :)

[4css]

According to a google search the order goes like this with focus:

:link
Applies to unvisited links
:visited
Applies to visited links
:active
Applies to elements that are being activated (BUTTON, INPUT, A, etc.)
:hover
Applies to elements that are being hovered over.
:focus
Applies to elements that have the focus

Source: Rich in style

[iamlost]

The 'common' pseudo-class order and reasoning:

LVFHA : :link :visited :focus :hover :active : when it is desirable for focus to display hover behaviour.

LVHFA : :link :visited :hover :focus :active : when it is not desirable for focus to display hover behaviour.

Less common but what I have been doing (thanks to David Baron and Bill Mason) for several years now:

:link:focus, :visited:focus { ... }
:link { ... }
:visited { ... }
:link:hover, :visited:hover { ... }
:link:active, :visited:active { ... }

Reasons for being somewhat different:
* it degrades well for less compliant browsers.
* it allows focus to cascade properly for accessibility purposes.
* note: by removing 'a', i.e. a:link dropped for :link, it eliminates named anchor concerns.