Re: CSS selector to better match label elements

> On 30 Apr 2015, at 09:21, Henrik Andersson <henke@henke37.cjb.net> wrote:
> 
> There was an idea to introduce the exclamation mark in selectors as a
> way to specify the subject. It was ultimately rejected . It would have
> been of some help in this situation, since it let you use the /for/
> syntax to select the label instead of the input.
> 
> I will leave it to more experienced people with better memory to explain
> why it was rejected.

There's been a syntactical change. "!foo > bar { fizz: buzz; }" has been
replaced with "foo:has(> bar) { fizz: buzz; }".

However, :has is *not* part of the so called dynamic profile (aka fast
profile) of selectors. This means that while its meaning is defined, it
is not available for use in stylesheets, because it cannot be implemented
in a way that is fast enough in the general case. Selectors used in
stylesheets need to be fast, as they all have to be re-matched against
the DOM every time it changes.

Instead, :has is only available in contexts where selectors are run once,
such as the javascript query() method.

Finally, the /for/ syntax isn't defined yet, but even it if was, as far
as I can tell, it primarily is useful in combination with :has(), since
the inverse of /for/ relationship is most often what you need. The reason
for that is that a form control can have many different states that you may
want to depend on to style the label, but the label doesn't have many
different states. It has :active and :hover, and these already propagate
to the form control anyway, so you can directly use "input:hover" and
and style the input when the label is hovered. This means that the most
typical way you'd want to use /for/ is something like this:

  label:has(/for/ :invalid)) { border-color: red; }

But even if we had /for/, you can't use that in style sheets because you
would need :has(), which can't. The :for() proposal gets you that, is more
readable, and can be included in the dynamic profile:

  label:for(:invalid) { border-color: red; }

 - Florian

Received on Thursday, 30 April 2015 09:07:24 UTC