Skip first few items in ul

Issue

Trying to set a divider but I want to skip the first few items in my ul. Cannot get it to work.

<ul>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
</ul>

My CSS with tailwind

ul {
   @apply divide-y;
}

I cannot skip the first three items. For those three items I do NOT want the divider. How to make?

Tried a dozen variations with this code:

css

ul > li:not(:nth-child(-n + 3)) {
  @apply divide-y;
}

Solution

The divide-y class should always be associated with the parent element. The purpose of the class is to place a border between child elements that appears as a visual divider.

If you don't want to see the divider on the first 3 elements, simply disable the border.

ul {
  @apply divide-y;
}
ul > li:nth-child(-n + 3) {
  @apply border-none;
}

<style type="text/tailwindcss">
  ul {
    @apply divide-y;
  }
  ul > li:nth-child(-n + 3) {
    @apply border-none;
  }
</style>

<ul>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
</ul>

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

Answered By - rozsazoltan