Crankeedoodledoo Crankeedoodledoo - 3 months ago 7
CSS Question

How can I override an anchor element's font color when applying an active class to its parent li element?

I have a navigation bar with three buttons which I'm trying to highlight when they're active by applying "active" class to the

li
elements using jQuery - the border and font color are supposed to change. So far, only the border color changes while the text remains the same.

Also, I'd like to override or prevent the
:hover
pseudo class when the link is active.

Here's the codepen which will hopefully make this clearer.
Could you please advise how to override the
a
element's font color?

Thanks!

Answer

You have HTML looking like

<ul class="topnav">

    <li class="topnavli">
      <a href="#fun-stop">Link 3</a>                                   
    </li>

     .......

Then styles for the anchors

.topnav a { color: #fff; }

then you add the active class to the LI elements, but the styles are only set as

.active { color: #FFADA0;  }

That's just styling the LI element, not the anchors inside, and the specification states that by default an anchor tag does not inherit attributes like color from the parent element if a href attribute is present, so those styles must be set directly on the anchor with something like

li.active a { color: #FFADA0; }

As the border is set on the LI element, that should be changed with a specific style for that element, so you end up with

li.active {
  border:3px solid #FFADA0; 
}

li.active a {   
   color: #FFADA0;     
}

Codepen