What's the precedence of the + operator in CSS selectors?

Question

From the CSS selector spec:

E + F matches any F element immediately preceded by a sibling element E.

What about operator precedence? What does #id1 #id2 + #id3 match? What about #id1 + #id2 #id3?

Is there a selector that means #id1 (#id2 + #id3) or (#id1 + #id2) #id3? (I'm assuming ( and ) aren't really allowed in CSS selectors, I'm not seeing them in the spec)

Answer 1

Every sequence of simple selectors and combinators is read by browsers from right to left, in a linear fashion. Combinators do not affect the ordering in any way. The rightmost selector, after the last combinator if any, is known as the key selector (see the reference links below for more), and that identifies the element that the rule applies to (also known as the subject of the selector, although note that the key selector may not always represent the subject of the selector, since different applications implement selectors differently).

The selector #id1 #id2 + #id3 means

Select element #id3
if it directly follows as a sibling of #id2
that is a descendant of #id1.

A DOM structure in which #id3 would match the selector would look like this:

#id1   ... any level of nesting     #id2     #id3 

While #id1 + #id2 #id3 means

Select element #id3
if it is a descendant of #id2
that directly follows as a sibling of #id1.

And a DOM structure in which #id3 would match the selector would look like this:

#id1 #id2   ... any level of nesting     #id3 

Notice the difference in the position of element #id2 in this DOM structure, as compared to the one above.

There isn't much of a precedence issue here since the descendant and sibling combinators go in different directions in the DOM. Both selector sequences read right to left either way.

Related answers:

• CSS combinator precedence?
• Are parentheses allowed in CSS selectors?
• CSS Adjacent Selector / Meaning