views:

43

answers:

3

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.

+2  A: 

First one is Both are right

Selectors Level 3

R. Hill
excellent - thanks mate!
JAG2007
Actually, this link shows that the order is irrelevant
Gareth
Oops, I just learned something
R. Hill
FYI, When I clicked the link, I found this which seemed to support that the first one was right: http://www.w3.org/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited(see first example)
JAG2007
+3  A: 

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*]? ')' ]
  ;
John Kugelman
+1  A: 

Both should be ok, if I understand the documentation correctly:

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted).

Felix Kling