[selectors] :volume() pseudo

[tabatkins]

Branching off of #3821, :muted is a good pseudo-class, but would it be useful to also have a :volume() pseudo-class letting you style differently based on the current volume level? One of the use-cases for these pseudo-classes is to help display custom player UI; a common UI pattern I see is a 3-state "muted"/"low volume"/"high volume" display on the volume button (or sometimes more states than that).

The syntax could perhaps be something like:

:volume( [ '<' | '>' ] '='? [ <number [0,1]> | <percentage [0%, 100%] ] )

So you could write :volume(<= 50%), or :volume(> .3).

[jonjohnjohnson]

Trust me, I want to see a more nuanced set of mechanisms for conditional/comparison styling (like #112 #3578), but I wonder if the comparison operators here would really be better or more feasible than simply defining the number /percentage argument as a minimum value to match against, then using a negation pseudo class if needing a max-like behavior?

Update - On second thought, I agree with @tabatkins followup #4001 (comment)

[tabatkins]

I don't really like that. :(

An implicit comparison isn't nearly as clear when reading it, I think: :volume(50%) looks like "volume is set to 50%", not "volume is 50% or more" or "volume is 50% or less" (I'm not actually sure which one you're proposing).

Also, :not(:volume(50%)) to get the opposite rendering is actually a way wider selector than it looks; you have to very carefully still scope it to just appropriate volume-possible elements. Letting you express the opposite relationship directly is a lot easier to use; just :volume(> 50%) or :volume(<= 50%), boom.