W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2020

[csswg-drafts] [selectors-4] add support for an :for() selector to address labels via their control (#5240)

From: Manuel Strehl via GitHub <sysbot+gh@w3.org>
Date: Thu, 18 Jun 2020 14:40:02 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-641263323-1592491200-sysbot+gh@w3.org>
Boldewyn has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors-4] add support for an :for() selector to address labels via their control ==
In [2015](https://lists.w3.org/Archives/Public/www-style/2015Apr/0400.html) 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](https://lists.w3.org/Archives/Public/www-style/2015Apr/0401.html), that such a feature is actually planned. However, as far as I can tell from [the current WD](https://www.w3.org/TR/selectors-4/), 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](https://gist.github.com/Boldewyn/ae5d54945f9044b6b42f) 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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5240 using your GitHub account
Received on Thursday, 18 June 2020 14:40:03 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:12 UTC