Question

I am aware that the pseudo classes must be in order in order to not conflict each other. (double ‘in order’ intended)

The thing is that I read that CSS reads from right to left (when finding a match), and that put me in doubt about this:

a{
color:blue;
text-decoration:none;
}

a:hover,a:focus{
text-decoration:underline;
}

Should it be a:focus,a:hover or it is good as I have it now?

Answer 1

In this case, it shouldn’t matter, as they cannot both be triggered at the same time… given that :hover is for link events triggered with a mouse and :focus is for link events triggered with a keyboard.

However, read this

The :link and :visited pseudo-classes should generally come first.
Next should be :focus and :hover—they’re specified now so that they
override and apply to both visited and unvisited links. If :focus
precedes :hover, the hover effect will apply to links with keyboard
input focus. The :active pseudo-class should always come last, since
we usually want to indicate clearly any links that have been
activated.

From here: http://reference.sitepoint.com/css/pseudoclasses

In this case, I think ideal would be

a:link{
}

a:visited{
}

a:focus, a:hover{
}

a:active{
}