How to target individual children's hover css classes using Tailwindcss

Question

How can I make it so that the direct children of a parent div have a css class applied to each one of them individually? For example, if I want each item to be font-bold on hover state. I'm hoping to do this inline using the class= attribute vs. having it defined in a css file.

Html:

<div class="[&>a]:hover:font-bold">
  <a>link 1</a>
  <a>link 2</a>
</div>

If I hover any one of those <a> children, then all of the <a> become bold. I want each one of them to become bold when they're hovered over without affecting their siblings.

Live example: https://stackblitz.com/edit/stackblitz-starters-pjrw8j?file=index.html

Answer 1

As per the documentation, sometimes variant order matters:

Ordering stacked modifiers

When stacking modifiers, they are applied from the inside-out, like nested function calls:

// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))

For the most part this doesn’t actually matter, but there are a few situations where the order you use actually generates meaningfully different CSS.

In your situation, you have [&>a]:hover: which is conceptually like [&>a](hover(…)). This would evaluate to:

1. hover: – hover this <div> element.
2. [&>a]: - select direct <a> child elements within this <div> element.

Whereas really, it seems like you'd want the reverse, hover:[&>a]::

1. [&>a]: - select direct <a> child elements within this <div> element.
2. hover: – hover this element (the direct <a> child elements within this <div> element).

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="hover:[&>a]:font-bold">
  <a>link 1</a>
  <a>link 2</a>
</div>