0

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
sigmaxf
  • 7,998
  • 15
  • 65
  • 125
  • take a look at this: http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes – kzhao14 Nov 23 '16 at 02:58
  • Yes, iI've seen that post before, that would match any element, I need something that matches the first, and then matches the second same as the first – sigmaxf Nov 23 '16 at 03:03

1 Answers1

0

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I guess that would also not work, even for matching data-parent properties? (with unknown names) – sigmaxf Nov 23 '16 at 03:05
  • @raphadko: If you put your subtasks in nested ul/li elements you can simply select subtask elements that are descendants of each parent task, without the need for the data-parent attribute, or matching based on the task id, i.e. `.red li { background: red }` – BoltClock Nov 23 '16 at 03:08