I've never encountered this before, but I was just thinking--what comes first; psuedo-classes or attribute selectors?




3 answers

This was chosen as the best answer

It doesn’t matter. From the CSS 2.1 Specification:

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

Since :hover is a pseudo-class and not a pseudo-element, it can appear anywhere in the selector. Both a[attr=value]:hover and a:hover[attr=value] will produce the same result.

If you want to use a pseudo-element, however, you’d have to put it last. For example, p[attr=value]:first-letter would work, whereas p:first-letter[attr=value] would not.

Answered over 7 years ago by Guillermo Esteves
  • Do you know if there is any particular concerns in terms of browser compatibility? For example, one order works in most browsers while the other doesn't? Stephen Belanger over 7 years ago
  • Good question. I did some tests and the most recent versions of Safari and Firefox didn't have any problems. (I don't have IE at the moment to try there.) To be honest, even though the standard says it doesn't matter, I'd probably use attribute first and pseudo-class later out of personal preference and for consistency. Guillermo Esteves over 7 years ago

you get the element you want with a[attr=value] and then you specify the hover state with :hover so hover comes last!

Answered over 7 years ago by Ionut Popa
danwellman 5600

The attribute is on the element so the [attr=value] comes first

Answered over 7 years ago by danwellman