Question

Simple Question: what’s the proper way to write a CSS selector with a class AND a pseudo class?

For example:

a.someclass:active {
  top:1px;
}

or

a:active.someclass {
  top:1px;
}

Which is correct? If possible, can you give me a source on this – such as a W3C reference? I tried to find it but alas I could not.

Answer 1

They are both correct, although the first one is more common.

Here’s what’s specified in the CSS grammar. You can see that the .class and :pseudo selectors are both allowed in the same places, along with #id and [attrib=val] selectors:

simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
  ;