CSS combinator precedence?

Question

Is there a precedence to combinators like

a > b ~ c d

(Note the space between c and d is the descendant combinator)

Or is it just read left-to-right, like

((a > b) ~ c) d

?

Answer 1

It doesn't matter.

a > b c 

will match the same elements regardless of whether you do it

(a > b) c

or

a > (b c)

I think that browsers go right-to-left.

Answer 2

the spec doesn't mention anything about precedence (that I can find) but I believe it's strictly left -to- right evaluation

Answer 3

According to Google, they're evaluated from right to left:

The engine [Gecko] evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule.

Mozilla's article, Writing Efficient CSS for use in the Mozilla UI has a section that describes how their CSS engine evaluates selectors. This is XUL-specific, but the same layout engine is used both for Firefox's UI and pages that display in Firefox's viewport.

As described by Google in the above quote, the key selector simply refers to the right-most item, so again it's from right to left:

The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). As long as the selector’s subtree continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.

---

In fact, if you were to ask me to read selectors and describe what they select in plain English, I would read them from right to left too (not that I'm certain whether this is relevant to implementation details though!).

So, the selector:

a > b ~ c d

would mean

Find all d elements
that are descendants of c elements
that are siblings of, and come after, b elements
that are direct descendants of a elements