I am having a difficult time trying to style a td element which has a div that has a class called ‘check’ as its child element. I am trying to style it from div element which is the parent of the table.

This is my selector in the below example:

<div class="[&>table>tbody>tr>td:has-[ .check]]:bg-gray-100">
  <table>
    <thead>...</thead>
    <tbody>
      <tr>
        <td><div class="check">...</div></td>
      </tr>
    </tbody>
  </table>
</div>

I am not that fluent with tailwind. What is it that I am doing wrong and how can I fix it

I’ve tried achieving this using the has- modifier
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants