0

I know I can Select elements by attribute in CSS, i.e. match all elements that have [data-state=42]. But can I use the dynamic content of a parent's data attribute to select different subsets of its children?

Say I have a nested structure like this:

<ul class="focusable" data-focus="benefit">
  <li class="drawback">Puppies can chew up your shoes.</li>
  <li class="benefit">But they are very friendly.</li>
  <li class="benefit">And will protect you from the mailman.</li>
  <li class="drawback">Sometimes they wet on the floor.</li>
  <li class="benefit">But their droppings are good for the lawn.</li>
</ul>

With just two states I could set up some CSS to highlight only certain items depending on the value of the data-focus attribute:

.focusable[data-focus=benefit] > .benefit {
  outline: 1px solid green;
}
.focusable[data-focus=drawback] > .drawback {
  outline: 1px solid red;
}

That's reasonable because there's only two potential values — benefit or drawback — or three if you include unsetting the data-focus entirely. But in my real world case, I have a much more complicated situation where a visualization could contain an ever-growing number of values I would want to target. Is there a way I could make my CSS more generic somehow?

/* INVALID CSS, just a sketch of desired outcome… */
.focusable[data-focus=assignTo(--focused-class)] > [class~=var(--focused-class)] {
  outline: 1px solid blue;
}

Given that the answer to just Is it possible to use CSS vars in CSS3 selectors? is already "no", the above CSS is off to a poor start. Is there any other approach that would let me accomplish this in pure CSS — i.e. without using JavaScript to update styles/classes on any of the child elements?

natevw
  • 16,807
  • 8
  • 66
  • 90
  • Attribute selectors include wildcard support. Is that something that would accomplish your needs? – TylerH Dec 16 '20 at 21:15
  • @TylerH I don't think so. This isn't a case where I could just match `.benefit-*` for a bunch of subtypes. Instead my selectors would be a large set of e.g. `.dog`/`.cat`/`.turtle`/`.gerbil`/`.goldfish` and every few months more options (`.ferret`, `.rabbit`) get added to the values I would want to be able to highlight. – natevw Dec 16 '20 at 21:22
  • 1
    If your markup is going to be dynamic then you will need JavaScript at some point to handle that, because CSS is not meant to be dynamic; it has to know at some level what is going to be there when it gets applied. I think the best case would be to simply use attr selector `[class]` for anything that has a class, but if you want to style elements uniquely based on *what* class they have... then you'll need to write the class beforehand or have JS detect and insert it at runtime. – TylerH Dec 16 '20 at 21:37

0 Answers0