Nth-child Not Working In Ul

I have a simple

with an unordered list inside: I am trying to make a different color on hover for each child but instead it is selecting all of them (highlig

Solution 1:

All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:

nav li:nth-child(1) a:hover {
  background: red;
}

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li:nth-child(1) a:hover {
  background: red;
}
nav li:nth-child(2) a:hover {
  background: #555;
}
nav li:nth-child(3) a:hover {
  background: green;
}
nav li:nth-child(4) a:hover {
  background: blue;
}

<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>

Solution 2:

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li:nth-child(1) a:hover {
  background: green;
}

nav li:nth-child(2) a:hover {
  background: blue;
}

nav li:nth-child(3) a:hover {
  background: pink;
}

<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>