saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.14k stars 1.3k forks source link

bug: menu item modifer not works with selector #3188

Open wenerme opened 2 months ago

wenerme commented 2 months ago

What version of daisyUI are you using?

latest

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/w6AoHnE3nx

Describe your issue

I want to control the style by data attr

<div class="p-4">
  <ul class="menu w-56 rounded-box bg-base-200">
    <li><a class="active">Item 1</a></li>
    <li><a class="focus">Item 2</a></li>
    <li class="disabled"><a>Item 3</a></li>

    <!-- style not works -->
    <li data-disabled class="data-[disabled]:disabled data-[disabled]:underline"><a>should disabled</a></li>
    <li data-active class="group/item"><a class="group-data-[active]/item:active group-data-[active]/item:underline">should active</a></li>
    <li data-focus class="group/item"><a class="group-data-[focus]/item:active group-data-[focus]/item:underline">should focus</a></li>
  </ul>
</div>

But this not works

github-actions[bot] commented 2 months ago

Thank you @wenerme for reporting issues. It helps daisyUI a lot ๐Ÿ’š
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.