Link Attribute order question

[Beeper]

Hi,

a {}
a:link {}
a:hover {}
a:active {}
a:visted {}

It seems that some browsers require these to be declared in a specific order - can anyone tell me what order is correct?

[vgarcia]

link, visited, hover, active I believe.

LoVe/HAte is an easy way to remember it

[Beeper]

Thanks - these little things help a lot

[AutisticCuckoo]

Don't forget about :focus! It should go along with :hover.

[Tyssen]

In which case it's LoVe & F'n HAte.

[Beeper]

OK focus - so what is this state exactly ? Surely the same as hover?

[Tailslide]

Lord
Vader
Former
Handle
Annakin

(is that really really sad?)

Focus is like hover but for keyboard users rather than just mouse-related. I usually just give it the same rules as hover.

[AutisticCuckoo]

OK focus - so what is this state exactly ? Surely the same as hover?

Not the same, but equivalent.

The :hover pseudo-class represents a state where the mouse cursor hovers over an element.

The :focus pseudo-class represents a state where an element has keyboard focus.

It's often overlooked, even by people who are otherwise well versed in web accessibility and usability. For someone who navigates by keyboard (out of preference or necessity) it can do all the difference if you get good visual feedback of which link/button has focus.

You can style :focus similar to :hover, but I often find that I like a more subtle change for :hover and a much more drastic feedback for :focus.

My reasoning behind that is that if you move the mouse cursor over something, you're already looking at it and all you need is some feedback that the element is 'active' (i.e., will respond to a click).

When you're navigating by keyboard, the focus can move to the other end of the monitor screen when you tab from one element to the next. It can increase usability dramatically if the change is sufficiently noticeable, so that the eye is drawn to it. For links, you can achieve that by changing the background colour, for instance. By setting it to a saturated, brilliant colour – preferably one that doesn't exist elsewhere in the design – it will be more eye-catching.