CODEWITHSUNDEEP
csscss-selectors
Joel Glovier
Joel Glovier

Reputation: 7679

What's the proper way to write a CSS selector with a class AND a pseudo class?

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.

Upvotes: 1

Views: 196

Answers (3)

R. Hill
R. Hill

Reputation: 3620

First one is Both are right

Selectors Level 3

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816334

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).

Upvotes: 1

John Kugelman
John Kugelman

Reputation: 361585

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*]? ')' ]
  ;

Upvotes: 3

Related Questions