JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav nav--nth-child">
  <a href="#">Logo</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

<nav class="nav nav--nth-of-type">
  <a href="#">Logo</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

SCSS

.nav {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  padding: 1rem;
}

.nav--nth-child a:first-child,
.nav--nth-of-type a:first-of-type {
  color: #fff;
  background-color: red;
}

.nav--nth-child a:nth-child(2),
.nav--nth-of-type a:nth-of-type(2) {
  color: #fff;
  background-color: blue;
}