问题
I have a tasks list on my application. Some tasks have subtasks, which are attached to their parents on my html code through a property.
These tasks are on a list (both parent and child tasks) in which there is no hierarchy of elements, just a plain <li> elements. The only attachment they have to the parent is the data-parent property.
I want to apply a class to every element that shares the parent, it would be easy if the class names were static, but since it's dynamic, it's a bit more difficult..
What I'm trying to accomplish:
.parent-element4322.red ~ li[data-parent=4322]{
background:red
}
This would be a static class, I'm thinking something like this with a wildcard of sorts:
.parent-element*.red ~ li[data-parent=*]{
background:red
}
On which, obviously, both *s would match the same class, and not any class.
Any idea on how that can be achieved?
回答1:
It looks like you're trying to match elements whose data-parent attribute corresponds to an existing number based on another element's .parent-element* class. Unfortunately, Selectors does not support this.
Based on your description of the markup I don't think there's much of a way around this other than DOM manipulations. I do wish to add though, that subtasks should ideally be marked up with nested lists. However if you have no control over the source markup, you'll have to find another way.
来源：https://stackoverflow.com/questions/40755232/a-css-wildcard-selector-to-match-dynamic-classnames