raphadko raphadko - 5 months ago 43
CSS Question

A CSS wildcard selector to match dynamic classnames?

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?

Answer

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.