[csswg-drafts] [selectors] Parameterized selectors (#10567)

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

== [selectors] Parameterized selectors ==
CSS is great for filtering content. This lets you keep your DOM mostly static and change what is visible by toggling attributes. However, this breaks down with dynamic content.

Take this example:

```html
<input value="taco">

<ul>
  <li data-name="crunch tacos"></li>
  <li data-name="meat pie"></li>
</ul>
```

I would like to highlight the `li` that matches the input value. To achieve this today you need to write JavaScript to do the filtering. Usually this means rerendering the entire list to either remove the `li`s that don't match (which is what almost everyone does), or perhaps toggling attributes onto the matching one. In either case, this is an expensive and code-heavy way to do filtering.

If CSS selectors could be used as parameters you could achieve the filtering without manipulating the list items. Here's an example of what I would like to do: (note that i know this is horrible and invalid syntax, it's only meant to communicate the goal)

```css
input$val=attr(value) + ul [data-name^=$val] {
  color: tomato;
}
```


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


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

Received on Friday, 12 July 2024 19:22:00 UTC