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.

1,421 votes
Vote
Sign in
(thinking…)
Password icon
Signed in as (Sign out)
You have left! (?) (thinking…)
Greg Whitworth [MSFT] shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

7 comments

Sign in
(thinking…)
Password icon
Signed in as (Sign out)
Submitting...
  • SWdV commented  ·   ·  Flag as inappropriate

    @726022756 Probably because it's not that useful. I agree it seems useful at first, until you learn it won't be available in stylesheets because of performance reasons (@387692926) (see https://drafts.csswg.org/selectors/#profiles). It will only be available in JS for querySelector(All), but since many use jQuery, which already supports :has in its selector methods, this is not too exiting.

  • Anonymous commented  ·   ·  Flag as inappropriate

    It would be wonderful. Why is does CSS have the restriction of not having it? There is no good reason!

  • SWdV commented  ·   ·  Flag as inappropriate

    Actually, this won't be supported in CSS, only JS, which is really unfortunate

  • BoltClock 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 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