hover style cannot override group-hover style

[SilentDepth]

Describe the problem:

Say this HTML:

<div class="group">
  <div class="group-hover:text-blue-500 hover:text-red-500">Lorem</div>
  <div class="group-hover:text-blue-500 hover:text-red-500">Ipsum</div>
</div>

When hovering on the "lorem" div, I expect "lorem" to be red and "Ipsum" to be blue.

But nothing goes red. Because the specificity of group-hover selector is bigger than hover selector (3 vs 2, due to the .group class).

I'm not really sure if this is a bug. But hover appears after group-hover in the default variant configuration, so I feel like that hover should override group-hover's effect.

Link to a minimal reproduction:

https://play.tailwindcss.com/QmLT8HgjhB

[richadr]

In your example, the classes are the same for both divs, so obviously they behave the same.

You mentioned already that specificity causes group-hover overriding hover, regardless of the order in the css output. But what's stopping you from removing the group-hover glass where you don't need it? Or nesting the div.

<div class="group">
  <div class="group-hover:text-blue-500">
    Lorem
    <div class="hover:text-red-500">Ipsum</div>
  </div>
</div>

[SilentDepth]

@richadr I was exploring a datagrid solution with display: contents, which needs group-hover to achieve row hover style (since you cannot directly hover on a contents box). I made a longer example to demo my case: https://play.tailwindcss.com/7tdHC8hpg8

My point here is, the variant order defines the order of CSS output, thus defines the rule overriding precedence. So we could use classes to set different styles for different states on the same class attr like this:

<input class="bg-gray-50 hover:bg-gray-100 focus:bg-yellow-200">

In the default config, focus comes after hover, so the focus style overrides hover style as we expect. This is the intuition the variant ordering gives us.

But things are not the same for group-hover. hover comes after group-hover, but cannot override the latter because of the specificity contributed by the .group class, which sounds not intuitive.

I'm thinking that it is possible to generate a group-prefixed version of group-hover selectors to even the specificities maybe?

[adamwathan]

This is just due to the nature of the selector specificity as mentioned. Duplicate of #3376.

[tuffstuff9]

Here are some more details on how to prioritize child vs parent group styling:

[JonAbrams]

How would one solve this with properties that can't be overridden by children? e.g. opacity

e.g.

<div className="group"> <!-- cannot apply opacity here without affecting the img element below -->
  <img src="avatar.png">
  <button className="opacity-0 group-hover:opacity-50 hover:opacity-100">⭐️</button>
</div>

✅ Use a second group, to match (and therefore beat) the specificity of the parent:

<div className="group">
  <img src="avatar.png">
  <span className="group/star">
    <button className="opacity-0 group-hover:opacity-50 group-hover/star:opacity-100">⭐️</button>
  </span>
</div>

Update: This fix isn't reliable since Tailwind doesn't guarantee rule order, and has switched places on me, breaking my fix.

[mateusfg7]

@JonAbrams +1 with this problem

[AbdullahAhmadAAK]

<Button
							text="Try For Free"
							style="group-hover:bg-[#BBBBBB] hover:bg-[#1F1F1F] group-hover:text-[#FFFFFF] btn-primary w-full rounded-sm"
						/>

I need the group-hover's color ON button when parent div is hovered over and that's working fine. However, when the button itself is hovered over, I want a different shade, but the above solutions won't help with that.