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:

<input value="taco">

<ul>
  <li data-name="crunchy tacos">crunchy tacos</li>
  <li data-name="meat pie">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 lis 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)

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