CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 21

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>

Upvotes: 0

Views: 60

Answers (1)

ray
ray

Reputation: 27245

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>

Upvotes: 2

Related Questions