'Why is nth child not working on my Ul element

So I am trying to select the 6th child of the Unordered list and it just can't seem to select the item. Is it because the LI's have an anchor as a child?

.nav-links ul:nth-child(6) {
  margin-left: auto;
}
<ul>
  <li><a href="">Vectors</a></li>
  <li><a href="">Photos</a></li>
  <li><a href="">PSD</a></li>
  <li><a href="">Video</a></li>
  <li><a href="">More <i class="fa-solid fa-caret-down"></i></a></li>
  <li id="nth"><a href="">Submit</a></li>
  <li>
    <a href=""><img src="Gmail_icon_(2020).svg.png" alt="" width="20px"></a>
  </li>
  <li>
    <a href=""><img src="meta-logo.png" alt="" width="30px"></a>
  </li>
</ul>
htmlcss


Solution 1:[1]

Edit: Updated to select the sixth immediate li child, instead of every sixth child anywhere under the ul.

Your selector is set up to select the ul that is the 6th child, when it appears you want the 6th li. Not sure what your intent is with the margin, but this will fix your selector:

/* also omitted the '.nav-links' qualifier because it's not in your markup */
ul > li:nth-child(6) {
  margin-left: auto;
  background: red;
}
<ul>
  <li><a href="">Vectors</a></li>
  <li><a href="">Photos</a></li>
  <li><a href="">PSD</a></li>
  <li><a href="">Video</a></li>
  <li><a href="">More <i class="fa-solid fa-caret-down"></i></a></li>
  <li id="nth"><a href="">Submit</a></li>
  <li>
    <a href=""><img src="Gmail_icon_(2020).svg.png" alt="" width="20px"></a>
  </li>
  <li>
    <a href=""><img src="meta-logo.png" alt="" width="30px"></a>
  </li>
</ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions