Within a rule, does selector order matter?

[Lenoxus]

Suppose I have a rule like this:

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

(Each of A, B, C could be anything, like .navbar#middleIcon or whatever.)

Are there any circumstances where the effect would be different if listed as “C, B, A”, or any other other? Either in terms of outcome or speed?

[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

[Author]

Posts