Someone on wha...@whatwg.org:
> This question is sort of CSS related, but I think it's worth bringing up
> here, assuming it hasn't already been discussed.
I’m cross-posting to www-style, please follow-up there.
> [required]:after {content:"*";}
>
> <label for="name1">Name</label>
> <input id="name1" type="text" required>
If we ignore the possibility of anonymous child elements ‘::before’ and
‘::after’ for replaced elements, this use case is somewhat more likely to be
solved in the not too distant future when the code looks more like this:
<label><input required></label>
There have been many proposals to add a selector that matches elements based on
their children.
input[required] < label /* what many proponents suggest first */
label:has(input[required]) /* previous draft proposal */
label:matches(input[required]) /* the latest favored syntax, I think */
What you are (not really) asking for would need something more complex.
input[required] = label
input[required][id>=] ~ label[for<=] /* ~ requires them to be siblings */
input[required][id=#1] ~ label[for=#1]
input[required][id#=] ~ label[for#=]
input[required]:target ~ label:source
label[for]:links(input[required][id])
label:links(input[required])
Something like that. Remember that the rightmost element is the one the style
ruleset is applied to, therefore ‘label’ needs to come last or must have
‘input’ inside a pseudo class (or pseudo attribute).
This is probably not easy or not possible to implement efficiently. In my
opinion Selectors (and some CSS modules) should have profiles associated with
them for different types of implementations: e.g. interactive, real-time user
agents and non-interactive ones that can take their time to layout a page.
