Select a href in a list item

April 20, 2023

I have to select a a href inside a list and exclude it from specific styling. Could not make it work with nth-child and tailwind.

<ul>
<li><a href="/" class="">linka</a></li>
<li><a href="/" class="">linkb</a></li>
<li><a href="/" class="">linkc</a></li>
<li><a href="/" class="">linkd</a></li>
<li><a href="/" class="">linke</a></li>
<li><a href="/" class="">linkf</a></li>
</ul>

So I want to apply styling to all links, a to f, but excluding b and d. Again, I have to target the a href and give it a class. Tailwinds arbitrary variants seems the way to go.

Came up with this:

ul > li > a {
@apply [&>*:not(:nth-child(-n+1))]:block;
}

But that did not work.

See above. See above.

>Solution :

I’d suggest, after verifying the functionality in the comments:

li {
  padding-block: 0.5rem;
  padding-inline: 1rem;
}

a {
  display: block;
}

/* here we select all <a> elements that are within
   <li> elements that are NOT :nth-child(2) or
   :nth-child(4) of among their siblings: */
li:not(:nth-child(2), :nth-child(4)) a {
  background-color: hsl(300deg 80% 80% / 0.7);
}

<ul>
  <li><a href="/" class="">linka</a></li>
  <li><a href="/" class="">linkb</a></li>
  <li><a href="/" class="">linkc</a></li>
  <li><a href="/" class="">linkd</a></li>
  <li><a href="/" class="">linke</a></li>
  <li><a href="/" class="">linkf</a></li>
</ul>

JS Fiddle demo.