[selectors] applying pseudo classes to the label based on the labeled control

[selectors] gives to the host language the ability to define additional ways for :hover and :active to match (other than being the directly hovered or active element, or its parents). HTML uses that to make the state apply to a labeled control if it applies to its label (<label for=“foo”> and <button id=“foo”>).

I believe that having this work in the other direction as well (apply to the label if it applies to its labeled control) would make plenty of sense, and that it should apply (at least to) to :hover, :active, and the :has-focus pseudo-class currently being discussed in another thread[1]. Having this apply to the input pseudo classes[2] might make sense as well. Requests for styling the label based on the control are frequent enough[3][4][5][6].

As CSS defers this to HTML, I raised this at the whatwg[7], but this has been met mostly with indifference, and with a bit of push back (from Boris Zbarsky and Ryosuke Niwa, both CCed). I am bringing the discussion to the csswg, as there is a higher density of people who care about selectors here, so we can bash it out here before either dropping it or sending it back to the whatwg with stronger back up.

The concern expressed (Boris and Ryosuke, correct me if I am wrong) is that since the relationship between labels and labeled controls is n-to-1, there are performance implications to doing it from the control to the label that are not present when going from the label to the control, and they’re concerning enough that this could outweigh any benefit.

However, IE already behaves this way for :hover and :active. I checked with microsoft, and the result of their investigations is that "there is not a single bug filed against IE regarding performance issues by tying the the label to the labeled control”. Absence of proof is not proof of absence, but this does provides good evidence in support of performance being manageable, especially since :hover is the most performance sensitive of the bunch.

Using :has() is not a viable alternative, because:
1) :has(), not being part of the fast profile, must not be supported by UAs for CSS selection
2) even with :has(), the relationship between a label and its labeled control in arbitrary markup cannot be expressed with existing selectors

Even if we solve both points above, the performance of doing it with a generic mechanism like :has() would undoubtedly be worse than the specialised behaviour I am proposing.

So, what does the csswg think?

[1] http://lists.w3.org/Archives/Public/www-style/2014Nov/0271.html
[2] http://dev.w3.org/csswg/selectors/#input-pseudos
[3] http://stackoverflow.com/questions/4388102/can-you-style-an-active-form-inputs-label-with-just-css
[4] http://stackoverflow.com/questions/5978239/anyway-to-have-a-label-respond-to-focus-css
[5] http://stackoverflow.com/questions/19362716/how-to-style-a-html-label-for-disabled-input
[6] http://lists.w3.org/Archives/Public/www-style/2013Jul/0294.html
[7] http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Nov/0073.html

 - Florian

Received on Thursday, 20 November 2014 17:17:45 UTC