nth-child(n) Selector Plugin

[mohammed-ijas]

Hi,
Is there a feature to add nth-child() selector like first child in plugins. Like here

Usage:
Suppose I have a ul with so many li s. I need to change color on hover of li s, without writing hover:color.colr into all li s.

In CSS we can do it by

ul li:hover{
 color:#525252;
}

OR

ul:nth-child(n):hover{
     color:#525252;
}

[mohammed-ijas]

One way to do this is by adding custom component to tailwindcss.

@layer components{
    .ul_class li {
        @apply hover:text-primary;
    }
}

<ul class="ul_class">
    <li>abc</li>
    <li>def</li>
...
</ul>

But it would be much easier with nth-child selector.

[simonswiss]

Hey! 👋

You could use the addVariant function from the plugin API to achieve that. The only impractical thing is you'd need to create a variant for each permuation of n you need to support.

Hope it helps!