CODEWITHSUNDEEP
htmlcss
seeberg
seeberg

Reputation: 99

Can not style an "active" link with css

I want to style the "active" link .login but it do not work. Where is the problem?

.active {
  color: rgb(0, 148, 199);
}
<div id="nav">
  <span id="logo"></span>
  <span id="navTop">
        <ul>
            <li><a href="#">.welcome</a></li>
            <li><a href="#">.register</a></li>
            <li><a class="active" href="#">.login</a></li>
            <li><a href="#">.contact</a></li>
        </ul>
    </span>
  <span id="navBottom">
        <ul>
            <li><a href="#">.overview</a></li>
            <li><a href="#">.feature</a></li>
            <li><a href="#">.videos</a></li>
        </ul>
	</span>
</div>

Upvotes: 0

Views: 90

Answers (1)

Brad
Brad

Reputation: 8668

This code seems to work fine. I would suggest you have some other css rule that is overriding this.

You can test this by adding !important to the css rule and see if it solves the problem. Then you need to track down what style is overriding it.

e.g.

.active {
    color: rgb(0, 148, 199)!important;
}


.active {
    color: rgb(0, 148, 199);
}
<div id="nav">
<span id="logo"></span>
<span id="navTop">
    <ul>
        <li><a href="#">.welcome</a></li>
        <li><a href="#">.register</a></li>
        <li><a class="active" href="#">.login</a></li>
        <li><a href="#">.contact</a></li>
    </ul>
</span>
<span id="navBottom">
    <ul>
        <li><a href="#">.overview</a></li>
        <li><a href="#">.feature</a></li>
        <li><a href="#">.videos</a></li>
    </ul>
</span>
</div>

Upvotes: 1

Related Questions