Search code examples
htmlcsscss-selectors

CSS nth-of-type is not working

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>

Solution

  • It's not working because it has multiple parents. nth-of-type works on direct siblings, not their parent and then on the siblings, or when all of the elements are the same with no distinguishable parent (they are all <a> tags). So it's better to target the siblings' parent, then the element just above, then the element, itself. 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>

    We get the parent they all have in common, then use nth-of-type on the <a> elements because they have these in common, not the home-navigation-item divs.