JSFiddle - React, Tailwind, and code Playground

hide all links apart from last. Using : not and :nth-of-type

by ian_smithz

HTML

<div class="prefPanel">

  <div>
    <div class="cookiecat">
      <a href="#" class="viewcookie">view cookies</a>
    </div>
  </div>

  <div>
    <div class="cookiecat">
      <a href="#" class="viewcookie">view cookies</a>
    </div>
  </div>

  <div>
    <div class="cookiecat">
      <a href="#" class="viewcookie">view cookies</a>
    </div>
  </div>

  <div>
    <div class="cookiecat">
      <a href="#" class="viewcookie">view cookies</a>
    </div>
  </div>

  <div>
    <div class="cookiecat">
      <a href="#" class="viewcookie">view cookies</a>
    </div>
  </div>

  <div>
    <div class="cookiecat">
      <a href="#" class="viewcookie">view cookies</a>
    </div>
  </div>

</div>

CSS

.prefPanel div:not(:nth-of-type(5)) .cookiecat a.viewcookie {
  display: none;
}