How can we improve the Microsoft Edge developer experience?

:has()

https://drafts.csswg.org/selectors/#relational

The relational pseudo-class, ‘:has()#’, is a functional pseudo-class taking a relative selector list as an argument. It represents an element if any of the relative selectors, when absolutized and evaluated with the element as the :scope elements, would match at least one element.

864 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Greg Whitworth [MSFT]Greg Whitworth [MSFT] shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    3 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • BoltClockBoltClock commented  ·   ·  Flag as inappropriate

        Not entirely sure how useful this would be if implementations stick with static profile :has() considering the ubiquity of jQuery. Most authors only really care about being able to do this in CSS. Hopefully you guys will figure something out.

      • Brian KardellBrian Kardell commented  ·   ·  Flag as inappropriate

        the verbiage above is a little obtuse, it's effectively jQuery's :has and it allows you to select things based on their contents. In selectors, it is historically/currently impossible to select an element by saying it has a descendant with some other quality, i.e. given:

        <div class="car">
        <div class="power-windows">
        </div>
        <div class="car">
        <div class="standard-windows">
        </div>

        There is no way to select any car which contains an element with the .power-windows class. With :has you can:

        .car:has(.power-windows)

      Feedback and Knowledge Base