Need help selecting child based on parent data attribute value

[danofpaco]

I'm trying to combine arbitrary variants and data-attributes selectors to style a child based upon the parent's data-attribute value. I've tried all manner of combinations, but I can't seem to get it the right syntax. Given the following:

<div data-hello="world">
    <div>Child</div> <!-- style me -->
</div>

The value of the data-attribute will change, and I need to conditionally style the child div based upon the value in the parent's data attribute.

What is the correct way to style a child based on a parent's data attribute value?

[wongjn]

You can use group variant combined with the data- variant:

<div data-hello="world" class="group">
  <div class="group-data-[hello=world]:text-red-500">Is red</div>
</div>

<div data-hello="foo" class="group">
  <div class="group-data-[hello=world]:text-red-500">Is not red</div>
</div>

See this in action on this Tailwind Play.

[danofpaco]

Thank you so very much. I started with something close to what you have, but I obviously missed something. I appreciate the help!

[logemann]

group works for me too but i really dont understand why this doesnt work:

<div data-hello="world" class="[data-[hello=world]>div]:bg-red-400">
    <div>Child</div> <!-- style me -->
</div>

[wongjn]

data-[hello=world]>div is not a valid CSS selector; you seem to have confused arbitrary variant syntax with arbitrary data-* modifier syntax.

You'd want [&[data-hello=world]>div]:bg-red-400 or perhaps *:data-[hello=world]:bg-red-400.