[whatwg] [Selectors4] Linked Elements, was: required attribute in label

[Christoph Päper]

Someone on whatwg at 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.