JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
  <li><a href="/" class="">link a</a></li>
  <li><a href="/" class="">link b</a></li>
  <li><a href="/" class="">link c</a></li>
  <li><a href="/" class="">link d</a></li>
  <li><a href="/" class="">link e</a></li>
  <li><a href="/" class="">link f</a></li>
</ul>

CSS

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

a {
  display: block;
}

li:not(:nth-child(2), :nth-child(4)) a {
  background-color: hsl(300deg 80% 80% / 0.7);
}