Re: [csswg-drafts] [selectors] Backwards combinators (#12453)

There is nothing ambiguous here. Combinators are applied left to right as there are no precedence rules, so taking it step by step removes all the ambiguity.
Are long strings of complex selectors easy to read? No, but that's orthogonal to these particular combinators. Authors regularly get confused with long chains of complex selectors. I'd wager there is nothing making `A C < B` intrinsically harder than `A C + B` or `A ~ B > C` except familiarity.

> The main issue that I see is that inverting the order of things in a selector can be confusing. It is understandable that we'd want to keep the subject on the right, but then how do we treat complex selectors?
> 
> `A C < B` — if this is the same as `A B:has(> C)`, it makes it really difficult to read at a glance.

`A C` tells us that `C` is a descendant of `A`, then `< B` gets us its parent (which may be a descendant of A or even A itself), so it's the same as `B:has(> :is(A C))` like @romainmenke said.

> What does `A < B C` desugar to?

`A < B` gives us a `B` which is the parent of an `A`, and then we get its descendant, `C`. So it desugars to `B:has(> A) C`.

To combine the two, what would `A B < C D` desugar to?
Again, `A B` gives us a `B` that is a descendant of `A` then `< C` gives us its parent, then ` D` gives us its descendant `D`. So, putting it together, it desugars to `C:has(> :is(A B)) D`.

Does it seem like the desugared versions are easier? Yes, because these are artificial examples. Here are some real ones:
- For something like "specify that the target of this popover is the preceding element", `& - *` is a lot easier to write than `*:has(+ &)`. 
- Same for "this button closes its ancestor `<dialog>`", `<foo-button closes="& << dialog">` is much easier than `<foo-button closes="dialog:has(&)">`

Ultimately, it's about whether something is more clearly expressed as a filter (`:has()`) or an operation. There are use cases where the filtering syntax is clearer, and use cases where the operation is clearer.

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12453#issuecomment-3046172659 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 7 July 2025 18:36:19 UTC