Styling based on custom selector state

[hood]

Hi, I’d like to request - if not already either requested or rejected - to be able to style elements based on other elements’ states by providing custom selectors.

Something like this, but with arbitrary selectors, such as:

<div id=“rahul”>Rahul</div>

<div class=“hidden [#rahul]-hover:block”>Ligma</div>

Ofc this would mean a syntax looking like [#id]/[.class]/[tag.class]/[.parent>.child] and such.

[wongjn]

I believe this is already possible, via several different syntaxes: https://play.tailwindcss.com/LOYWvLPjLx

[hood]

This... doesn’t seem to work when the two items are not peers?

Eliminating the last two examples, which require peer so can be ruled out easily, if I adapt the first to something like

<div class="m-10">
  <div>
    <div id="rahul">Rahul</div>
  </div>

  <div class="hidden [#rahul:hover~&]:block">Ligma</div>
</div>

it stops working, even if i update the class to contain [#rahul:hover]:block. I’d like to have something enabling us to target anything solely based on the selector, regardless of relative positioning in the document.

[wongjn]

You can use some high-level selector like body, html, :root with :has(): https://play.tailwindcss.com/gx1iaxNYuQ

[hood]

Aight thanks, so feasible is feasible. But... wouldn’t being able to use straight selectors feel a lot nicer in terms of DX? Ofc if it doesn’t translate into something impossible to maintain in the engine.

EDIT: And thank you for the super quick replies so far, much appreciated.