Cannot target an element inside other element by nth-child

Question

I'm trying to target "i" element by "nth-child" selector but i don't know how.Can you please explain this to me how? In the code provided that i tried i'm using SASS

 <ul class="nav-social">
          <li>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-twitter"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-youtube"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-instagram"></i></a>
          </li>
        </ul>

How i tried:

.nav-social {
    li a {
      margin-right: 0.5rem;


      i {
        font-size: 1.5rem;
        // border: 1px solid red;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0);
        color: whitesmoke;
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;

        &:nth-child(1) {
          color: green;
        }
      }


    }
  }

Answer 1

You need to select the nth-child of the ul (the parent). So you need to target the li elements:

.nav-social
{
    li
    {
        a
        {
            margin-right: 0.5rem;
            i
            {
                font-size: 1.5rem;
                // border: 1px solid red;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0);
                color: whitesmoke;
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 35px;
            }
        }
        &:nth-child(1)
        {
            a
            {
                i
                {
                    color: green;
                }
            }
        }
    }
}