CSS nth-of-type is not working
<p>Using the <code>nth-of-type</code> 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 <code>home-navigation-item</code> divs are all colored aqua. </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>   .home-navigation-item:nth-of-type(1) {
     background-color: aqua;
   }
   .home-navigation-item:nth-of-type(2) {
     background-color: red;
   }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="home-navigation"&gt;
  &lt;a href="news.html"&gt;
    &lt;div class="home-navigation-item"&gt;NEWS&lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="announcements.html"&gt;
    &lt;div class="home-navigation-item"&gt;ANNOUNCEMENTS&lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="events.html"&gt;
    &lt;div class="home-navigation-item"&gt;SCHEDULE OF EVENTS&lt;/div&gt;
  &lt;/a&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>