Question

Which is the correct way to specify a hover/focus/visited state on a link which has a class?

a:focus.class{}

or

a.class:focus{}

Both seem to work, just wondered which is considered the right way.

Answer 1

Both are correct since the pseudo-class can appear anywhere in there.

From the CSS2 spec:

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

Personally I prefer the second though, for readability mainly, that and it may change as you go, e.g. :hover, so I prefer having all the static then dynamic, not a mix…just makes more sense I guess.