Re: [csswg-drafts] [selectors4] :for selector (#1067)

Copying over the comment by @Boldewyn from the duplicate issue #5240: 

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.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1067#issuecomment-707822189 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 13 October 2020 15:30:20 UTC