[csswg-drafts] [selectors-4] Add a :media pseudo-class, to match the set of elements matching the media pseudo-classes (#6237)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors-4] Add a :media pseudo-class, to match the set of elements matching the media pseudo-classes ==
Based on previous resolutions, @hober added several new media pseudo-classes in #6219, to complement our existing :playing and :paused.

While reviewing, tho, I realized this introduces a new problem. :playing and :paused are mutually exclusive and exhaustive - if an element is *capable* of matching them, it *always* matches exactly one of them. So if you want to capture all media elements that aren't playing, you can just write `:paused`, and vice versa.

However, several of the new pseudo-classes don't have this property. For example, there's no easy way to select all the media elements that *aren't* muted - `:not(:muted)` also selects all the non-media elements on the page.

I suggest we add a `:media` pseudo-class that simply matches media elements, defined as elements capable of matching any of the media pseudo-classes. This way you can match unmuted media elements with `:media:not(:muted)`, which is nice and straightforward.

------

A possible alternative is to replace the just-merged new pseudo-classes with a catch-all `:media()` pseudo-class, that takes keywords to represent the various states. (And, if necessary, leave `:playing` and `:paused` in as pseudonyms for `:media(playing)` and `:media(paused)`.)  I don't think this is a great idea, tho - we'd have to add negated variants of each state, or some negation syntax, and for the simple cases of just wanting to match all elements with a single state, this a decent bit more typing.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6237 using your GitHub account


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

Received on Thursday, 22 April 2021 17:39:33 UTC