How to target 2 or more selectors?

[akhran]

How do I target .button:hover .div__text{} in Tailwind Css so that the inner text change to red when hovering over the button? If I add hover:text-red to div__text, it does not work as intended as the color only change when hovering over the div__text and not over button div.

Much appreciated, thanks!

[nckrtl]

considering your html looks like:

<button>text</button>

try: <button class="hover:text-red-500">

or:

button {
  @apply hover:text-red-500;
}

I would recommend simplifying it if your button looks something like:

<div class="button">
  <div class="div__text>
    text
  </div>
</div>

because then you need something like

.button:hover > .div__text {
  @apply text-red-500;
}

[tlgreg]

Mentioning because the need for @apply was not mentioned in the opening post.

There is also group-hover: variant which you can enable for the utilities you wish to use with.

<button class="group">
  ...
  <div class="group-hover:text-red-500">foo</div> <!-- div__text -->
</button>

// tailwind.config.js
module.exports = {
  variants: {
    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
  },
}

Docs: https://tailwindcss.com/docs/pseudo-class-variants#group-hover