The inverse of group? Or a peer before?

[frederikhors]

Is it possible the inverse of group?

I mean if I have: https://play.tailwindcss.com/DTL8yM9GKv:

<div class="group-hover:bg-red-500">
  <div>Hovering this should not change the parent background color</div>
  <a class="group" href="/">When I hover only this link the background becomes red</a>
</div>

I also tried with peer but it doesn't work because it's after the peer I need: https://play.tailwindcss.com/YdLETrvmnZ:

<!-- This works -->
<div>
  <div class="peer bg-blue-300">Hover me</div>
  <div class="peer-hover:bg-red-300">Green</div>
</div>

<br /><br />

<!-- This doesn't -->
<div>
  <div class="peer-hover:bg-red-300">Green</div>
  <div class="peer bg-blue-300">Hover me</div>
</div>

[sntran]

For the first case, there is not a direct way to do it, but if you can wrap the inner text of the <a> with a <span> or something, then it's doable with the composite has-group-hover: variant:

https://play.tailwindcss.com/UkHMx4x0jk

<div class="has-group-hover:bg-red-500">
  <div>Hovering this should not change the parent background color</div>
  <a class="group" href="/">
    <span>When I hover only this link the background becomes red</span>
  </a>
</div>

For the second case, it's not possible, as the peer variant uses ~ * selector. If you can reverse the DOM order (but change the appearance order with something like flex flex-col-reverse), then it's doable:

https://play.tailwindcss.com/GOSyvuFkDj

<div class="flex flex-col-reverse">
  <div class="peer bg-blue-300">Hover me</div>
  <div class="peer-hover:bg-red-300">Green</div>
</div>

[wongjn]

First case, you don't necessarily need a wrapper: https://play.tailwindcss.com/MrKj14DNDa
Second case, you don't necessarily need to use flex to reverse source order: https://play.tailwindcss.com/Pglnh3OIGA

[sntran]

Yeah, I did not want to get into arbitrary variant.