Shinji-san Shinji-san - 3 months ago 16
CSS Question

Active Page not working

Hello I am terribly sorry for the 'easy' question, it's just that I did this verbatim from the website and so I must be missing something painfully obvious. Ok so I have an

li
list and I want the first one to be yellow and the other elements to be white. I have for one of my rules in the real project
li a { color: white
but I am pretty sure that this specific class should override that rule, no? Any help would be appreciated, thanks.



.active{
color: yellow;
}


#subnav {
height: 10%;
text-align: center;
}

#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
text-align: center;
width: 100%;
font-weight: bold;

}

#subnav li {
display: inline-block;
}

#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#subnav li a:hover {
color: yellow;
}

<div id="subnav">


<ul>


<li> <a class="active" href="#overview">Overview </a></li>




</ul>

</div>






Answer

Add a more specific css selector to override the white color coming from #subnav li a like below:

#subnav li a.active {
  color: yellow;
}

and you will have the first li yellow if you have put active class to it.

.active {
  color: yellow;
}
#subnav {
  height: 10%;
  text-align: center;
}
#subnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: green;
  text-align: center;
  width: 100%;
  font-weight: bold;
}
#subnav li {
  display: inline-block;
}
#subnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#subnav li a.active {
  color: yellow;
}
#subnav li a:hover {
  color: yellow;
}
<div id="subnav">

  <ul>
    <li> <a class="active" href="#overview">Overview </a>
    </li>
    <li> <a href="#test">Test </a>
    </li>
  </ul>

</div>