Reply To: Within a rule, does selector order matter?

[metageeky]

It should not matter. Even if one selector is more “specific” than the other, the browser will register that rule as a match.

I guess you could run into an issue in the following sense depending on how the browser tracks rules matching. Say your CSS is the following:

A, B, C {
   height: 50%;
   width: 50%;
}

D { width: 100%; }

Assume that an element matches to A, C, and D. In terms of specificity, C is more specific than D and D is more specific than A. In other words, by specificity, an element that matches A, C, and D gets ruled by C and should have a width of 50%.

A problem could occur if the browser attempts to be “smart” and efficient. Consider what happens if the browser sees that the first rule matches on A then skips to the next rule (and does not test B or C). Only A and D are marked as matches, meaning the width of the element will be 100% (as D is more specific than A and C was never considered).

I have no idea if this occurs in any browsers, but even if it does, smarter CSS design will solve it.

metageeky