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>