JSFiddle - React, Tailwind, and code Playground

HTML

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

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

SCSS

p{
  margin: 0;
}

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

.nav--nth-child p:nth-child(2){
  color: #fff;
  background-color: blue;
}

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