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

a[attr=value]:hover

or

a:hover[attr=value]

3 answers

1
point
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 about 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 about 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 about 7 years ago
1
point

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

Answered about 7 years ago by Ionut Popa
danwellman 5600
0
points

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

Answered about 7 years ago by danwellman