Kevin PennekampJul 7, 2025
Johannes Odland

This proposal from @leaverou looks really interesting 👀

Now that we have `:has()` it should be possible to create `inverted` combinators.

A new parent combinator `B < A` could be syntactic sugar for `A:has(> B)`. Similarly we could add previous sibling and ancestor combinators.

The symmetry could make it easier for students to learn, and it could improve readability.

Child selector: `A > B`
Parent selector: `B < A`

What do you think?

Go check it out:

https://github.com/w3c/csswg-drafts/issues/12453

[selectors] Backwards combinators · Issue #12453 · w3c/csswg-drafts

Combinators that could go "backwards" have been proposed before, but until :has() they were rejected on the basis of feasibility. However, now that we have :has(), they are merely syntactic sugar: ...

GitHub
Jul 7, 2025 at 5:57amWeb
Show threadZenobia ŻaczekJul 7, 2025
@johannes @leaverou it blows my mind a bit, but it's clean and simple. I would go for it.
Show threadNico à·´.Jul 7, 2025
@johannes @leaverou Would totally read this as `B:has(> A)` - so maybe complexity oversimplified if it can be misread that easily? I figure probably even more with longer/chained selectors.
Show threadJohannes OdlandJul 7, 2025

@distantnative @leaverou

I do see how this can be an issue, but mostly with parent/ancestor selectors. But it could be something I would become accustomed to.

Previous and preceding sibling selectors do not have the same issue. We're used to selecting the next and subsequent siblings, and selecting preceding and previous siblings seems like a small leap:

Next-sibling: `A + B`
Subsequent-siblings: `A ~ B`
Previous-sibling: `A - B`
Preceding-siblings: `A -~ B`

Show threadMatt WilcoxJul 7, 2025
@johannes I read that "is immediate parent of" though, because > is immediate child, so it's not strictly the reverse the "backward" symbol implies it is? Unless it is and if that's the case I'd hardly ever use it as most times I use :has() it's not in relation to direct children/parents. @leaverou
Show threadJohannes OdlandJul 7, 2025

@mattwilcox @leaverou

I think you're reading it right.
`C < P` would select the parent P of child C.

The proposal includes more combinators though:

Parent: `C < P`
Ancestor: `D << A`
Previous-sibling: `A - B`
Preceding-siblings: `A -~ B`

Show threadMichiJul 7, 2025
@johannes @leaverou Honestly, if I came across this syntax, I'd have to really think about what it translated to
Show threadJohannes OdlandJul 7, 2025

@michi101 @leaverou

You're right.. But I think the same applies the first time you come across any of the combinators. `A ~ B` is something we once had to learn.

Show threadMichiJul 8, 2025
@johannes @leaverou yeah, although we already had to learn :has() and I feel it's easier to look at it and make an educated guess about what it does (for devs unfamiliar with it)
Show threadLea Verou, PhDJul 8, 2025
@michi101 @johannes As opposed to regular combinators, that are just self-evident 😅
Show threadMichiJul 8, 2025

@leaverou @johannes Certainly not, but in this case there's already :has(), so I either have to develop an intuition for both* or mentally map one to the other. A bit like Array#reduce vs a for loop - sure, I know what reduce does, but code that uses it isn't intuitive to me.

* unlikely because I don't need this often enough