Arbitrary group

[usman26392]

For more control, you can use the & character to mark where .group should end up in the final selector relative to the selector you are passing in:

https://tailwindcss.com/docs/hover-focus-and-other-states

I could not understand this arbitrary group modifier, Can anyone give complete example that how it will use?

[alex-krasikau]

Hey @usman26392!

Here's a mental model to understand how group works. A common example is setting child styles when the container is hovered or focused - https://play.tailwindcss.com/GXpvrmcgXv.

<a href="#" class="group block max-w-sm rounded-xl bg-red-200 p-8">
  <h2 class="text-lg">ABC Resort</h2>
  <p class="text-sm">Hotel and restaurant</p>

  <button class="mt-20 rounded-lg bg-red-500 px-4 py-2 text-white group-hover:bg-red-600">Check out</button>
</a>

In the example above, when the user hovers over the link block in the example, the button will change color from red-500 to red-600.

In this example, we utilize a prebuilt group modifier called group-hover, a shorthand for group-[&:hover]. When you encounter the ampersand symbol, you can substitute it with the .group class name. Therefore, understanding this, we can view this selector as .group:hover child => the child of the group that is hovered.

If you want to handle more complex cases, Tailwind CSS offers a tool to create modifiers of any complexity. For instance, group-[:nth-of-type(3)_&] requires the group to be the third element's child in the list to trigger the block behavior on the child.

Here's the generated CSS declaration for this rule:

:nth-of-type(3) .group .group-\[\:nth-of-type\(3\)_\&\]\:block {
  display: block;
}

Please inform me if this is helpful.

[usman26392]

hey @alex-krasikau


I was asking about this structure please can you inform me complete HTML structure of it?

https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups

Thanks for helping

[alex-krasikau]

Sure, here it is - https://play.tailwindcss.com/ufcBceLYrz

<ul>
  <li>
    <div class="group">
      <div class="bg-red-100 group-[:nth-of-type(3)_&]:bg-red-300">First child</div>
    </div>
  </li>
  <li>
    <div class="group">
      <div class="bg-red-100 group-[:nth-of-type(3)_&]:bg-red-300">Second child</div>
    </div>
  </li>
  <li>
    <div class="group">
      <div class="bg-red-100 group-[:nth-of-type(3)_&]:bg-red-300">Third child</div>
    </div>
  </li>
  <li>
    <div class="group">
      <div class="bg-red-100 group-[:nth-of-type(3)_&]:bg-red-300">Forth child</div>
    </div>
  </li>
</ul>

[usman26392]

Thanks, Now I got it.