[csswg-drafts] [selectors] `/idref()/` combinator to follow element references for arbitrary IDREF attributes (#10970)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] `/idref()/` combinator to follow element references for arbitrary IDREF attributes ==
In the past we have been discussing a `/for/` combinator to go from a label to the input it references (cannot find the issue now). However, HTML is rife with several IDREF attributes. Here is a small subset:

- `for`, in `<label>` and `<output>`
- `list` in `<input>`
- A host of ARIA attributes (e.g. `aria-describedby`, `aria-labelledby`, `aria-activedescendant`, `aria-controls`, `aria-details`, `aria-flowto`, `aria-owns` etc.)
- Popovers (`popovertarget`)
- Invokers (`invoketarget`)
- [`anchor`](https://github.com/whatwg/html/pull/9144)
- Plus, web component authors can always define their own, custom IDREF attributes

It seems clear that the path forwards for future combinators is `'/' <ident> '/'`. But that also opens the path for having *functional* combinators. What if we define a combinator that takes any attribute as a parameter and treats it as an IDREF?
Then `/for/` becomes:

```css
label /idref(for)/ input {
 /* ... */
}
```

but also things like this are possible:

```css
input.country /idref(list)/ datalist {
 /* ... */
}
```

Or even:

```css
my-tooltip /idref(for)/ * {
 cursor: help;
}
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10970 using your GitHub account


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

Received on Friday, 27 September 2024 22:38:57 UTC