Correct way to do Hover/Focus/Visited on links with a class?

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.

Answer 2

The only example of this I could find in the spec was this:

a.external:visited { color: blue }

Like Nick, I prefer this way.

Answer 3

I think for readability I'd use the second. Declaring the pseudo class first could be easily missed during maintenance.

Answer 4

Both are fine according to the CSS2.1 spec:

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.

A pseudo-element (:after, :before) is only allowed at the end though,

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

Personally I would keep the pseudo-classes at the end as well, as I think it improves readability.

Answer 5

I personnaly use the second one, here is how I view this :

You must think of that with the semantics, you would say

"When <a> of class <class> trigger the event <hover> I want <that> to happen."

not this :

"When <a> trigger event <hover> check if it is of class <class> then do <that>."