[selectors-4] add support for an :for() selector to address labels via their control #5240
Description
In 2015 I suggested on the mailing list to add a new pseudo-class :for() to address <label>s by the features of their referenced control element.
@frivoal said, that such a feature is actually planned. However, as far as I can tell from the current WD, there seems to be no motion in this particular direction. Therefore I wanted to bring it back to attention. After 5 years I still would find it tremendously helpful to style non-trivial forms. Thanks to @CarlosMadeira to poke me to write up this issue!
Back in the days I also prepared a gist to showcase the features and define the problem set, that :for() would help to address.
Copy ’n pasted description, that I posted on the mailing list:
A pseudo-class :for() can provide better control over addressing <label>
elements. Its content must be a single selector or selector list
(mirroring :not()), that is matched against label.control. The
specificity of :for() is the specificity of its arguments. Examples:
label:for([type="text"]) /* all labels with
label.control.type === "text" */
label:for(:invalid) /* all labels with
label.control.invalid === true */
label:for(:focus) /* label.control ==
document.activeElement */
label:for(:disabled):for(read-only) /* chaining :for(): labels for
disabled read-only inputs */
label:for(#foo) /* label, that refers to the input
#foo */
If a <label> has no corresponding `control`, it will never match a
:for() selector. It could be matched by :not(:for(*)).
The :for() selector does not rely on any ID reference but on the
algorithm to find the control for a label outlined in
<http://www.w3.org/TR/html5/forms.html>. In later specifications it
could be extended to also match references defined in another way, e.g.,
"reverse lookup" via aria-labelledby or a[href^="#"].
If there is anything I can do to help further this proposal (opening tickets in browser vendor bugtrackers, drafting copy for the spec, ...), I’d be glad to help.