Search code examples
htmlcsschildren

Unable to get child of nav element

I am having some trouble getting the child of element. Here is the HTML code I have:

<div class="collasped-nav">
   <i class="fa fa-bars fa-2x"></i>
   <nav class="closed">
      <a href="#">Electronics</a>
      <a href="#">Kids & Baby</a>
   </nav>
</div>

And here is the CSS:

.collasped-nav > i{
  color: #23527c;
}
.collasped-nav > nav{
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
.collasped-nav > nav.closed{
  display: none;
}
.collapsed-nav > nav > a{
  background-color: #23527c;
  padding: 10px;
}

For some reason, the follow .collapsed-nav > nav > a does not go into effect. Everything up to the collapsed-nav > nav.closed works, but the collapsed-nav > nav > a does not. What am I doing wrong?

Solution

  • It's typo, use this:

    .collasped-nav> nav> a{
  background-color: #23527c;
  padding: 10px;
}

    Note: Use have used .collapsed-nav but it should be .collasped-nav

    Working demo