CSS strange appear of color in link

Question

I am creating a few HTML pages and I want the navigation link to the current page to have different styling than the rest of the links. However my current solution is not producing the desired result.

This is my code:

<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li class="current"><a href="about.html">ABOUT</a></li>
</ul>

And the CSS:

.current{
   color: #0078fe;
    font-weight: bold;
}

a:hover {
    color: white;
}

a:active {
    color: #0078fe;
}

But this has the following results:

Home:

About:

How can I style the correct link to the current page with the current styling without applying to the other links?

Answer 1

The user-agent (browser) default styling for the link itself (the a element) is overwriting your styles because the link styles of the user-agent have a higher specificity to the actual element being styled, as your .current selector is selecting the list item that is the parent of the link and are only applying some styles to their children through inheritance.

If you want the link to only be bold on the active state, then you need to have the font-weightproperty changed on theactive` selector, as I have done in the examples below.

What you want to do is give a class to the links themselves (the a elements) and put the properties on those. Could use a class name like .nav-link. I am assuming that .current is meant to just be on whatever the link for whatever the current page is. Like this:

<ul>
    <li><a class="nav-link current" href="#">HOME</a></li>
    <li><a class="nav-link" href="about.html">ABOUT</a></li>
</ul>

.nav-link {
   color: #0078fe;
}

.nav-link:hover {
   color: #fff;
}

.nav-link:active {
   color: #0078fe;
   font-weight: bold;
}

If you meant .current as a class for the link of the current page the user is on, you could also use the :not() selector to keep the hover and active states from applying to the "link" for the current page, the one with the .current class applied. Like so:

.nav-link {
   color: #0078fe;
}

.nav-link:not(.current):hover {
   color: #fff;
}

.nav-link:not(.current):active {
   color: #0078fe;
  font-weight: bold;
}

---

While keeping selectors simple and just applying a class to all the a elements like above is a better practice, alternately you could continue to have a class on each li element and then use a descendant combination selector.

<ul>
    <li class="nav-link current"><a href="#">HOME</a></li>
    <li class="nav-link"><a href="about.html">ABOUT</a></li>
</ul>

.nav-link > a {
   color: #0078fe;
}

.nav-link > a:hover {
   color: #fff;
}

.nav-link > a:active {
  color: #0078fe;
  font-weight: bold;
}

---

🚨 EDIT 🚨

It looks like what you actually are asking is to style a link in a nav differently when you are on the page the link is for. You do this by applying a class to the link for the page you are on, as I did above by using the '.current' class. The :active state has nothing to do with that, and I think that why I and others did not initially understand you. What you are going to want to do is this:

<ul>
    <li><a class="nav-link current" href="#">HOME</a></li>
    <li><a class="nav-link" href="about.html">ABOUT</a></li>
</ul>

.nav-link {
   color: #0078fe;
}

.nav-link:not(.current):hover {
   color: #fff;
}

.nav-link:not(.current):active {
   color: #0078fe;
}

.current {
  font-weight: bold;
}

Here you have the nav-link classes on the actual a elements themselves, the current page also gets the current class on its link. You set the color for the link, and the current and active states while keeping the current link from getting the hover/active states using the not() combination selector. Finally we say that anything with the .current class gets bolded. Just add the current selector to the HTML of each page's respective link. If it is a Single Page Application then you can use JavaScript to apply the class when a link is clicked. If you have anymore questions, just let me know!