CSS nth-of-type is not working

Question

Using the nth-of-type selector in CSS doesn't work for me. It applies the style of the first child to the rest of its siblings. So what happens is all the home-navigation-item divs are all colored aqua.

   .home-navigation-item:nth-of-type(1) {
     background-color: aqua;
   }
   .home-navigation-item:nth-of-type(2) {
     background-color: red;
   }

<div class="home-navigation">
  <a href="news.html">
    <div class="home-navigation-item">NEWS</div>
  </a>
  <a href="announcements.html">
    <div class="home-navigation-item">ANNOUNCEMENTS</div>
  </a>
  <a href="events.html">
    <div class="home-navigation-item">SCHEDULE OF EVENTS</div>
  </a>

</div>

Answer 1

It's not working because it has multiple parent. nth-of-type works direct siblings not their parent and then siblings. So it's better to target their siblings parents and then elements. Read This

.home-navigation a:nth-of-type(1) .home-navigation-item{
   background-color: aqua;
}

.home-navigation a:nth-of-type(2) .home-navigation-item{
   background-color:red;
}

<div class="home-navigation">
        <a href="news.html"><div class="home-navigation-item"> NEWS </div></a>
        <a href="announcements.html"><div class="home-navigation-item"> ANNOUNCEMENTS </div></a>
        <a href="events.html"><div class="home-navigation-item"> SCHEDULE OF EVENTS</div></a>
</div>