Why does this pseudo class for links not work?-CodePudding

I am trying to set the third link in a list with a different color, but everything does not work well. All colors of the 3 links change to the #5bacc3 color.

Here is my code:

HTML code:

<ul >
  <li><a href="../index.html">ABOUT</a></li>
  <li><a href="menu.html">MENU</a></li>
  <li><a href="menu.html">SHOP NOW</a></li>
</ul>

CSS code:

.nav-section__link a:link:last-child,
.nav-section__link a:visited:last-child {
  color: #5bacc3;
}

CodePudding user response：

the li is the child of the ul not the anchor tag

.nav-section__link li:last-child a:link,
.nav-section__link li:last-child a:visited {
  color: #5bacc3;
}

<ul >
          <li><a href="../index.html">ABOUT</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="menu.html">SHOP NOW</a></li>
        </ul>

CodePudding user response：

Well @Thành Nhân, you are targeting <a> tag as last child. But there anchor is the only child and so they are last too.

So target with <li> tags as children of ul Keep follow hierarchy in css that will help you to get results better and without any error.

.nav-section__link li:last-child a:link,
.nav-section__link li:last-child a:visited {
  color: red;
}

<ul >
  <li><a href="../index.html">ABOUT</a></li>
  <li><a href="menu.html">MENU</a></li>
  <li><a href="#">SHOP NOW</a></li>
</ul>