Crankeedoodledoo Crankeedoodledoo - 1 year ago 77
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

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
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
element's font color?


Answer Source

You have HTML looking like

<ul class="topnav">

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


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 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 {
  border:3px solid #FFADA0; 
} a {   
   color: #FFADA0;     


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download