I've been learning CSS for a few months and I'm trying to build a practice website using bootstrap as well. I've selected a nav-bar and want to code page links that will change color based on which page is currently open. I'm doing this by making a class for each link called "activePage" and coding a CSS selector for that class in my custom styles.css
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="activePage" href="index.html">News</a></li>
<li><a href="tour-dates.html">Tour Dates</a></li>
<li><a href="about.html">About</a></li>
<li><a href="discography.html">Discography</a></li>
<li><a href="other-media.html">Other Media</a></li>
</ul>
<div align = "right" class="social">
<ul>
<li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
As you can see for HTML page I have a class on the nabber for the active page called "activePage"
For now i have
a.activePage {
color:blue;
}
as the CSS rule, but nothing shows up. Here's the odd thing When I hit inspect element to see what CSS rules are being applied to links I get this.
It says that a.activePage is the most specific selector, but for some reason the color of the text is being determined by .navbar-inverse .navbar-nav>li>a in bootstrap.css. Why is this happening. If my CSS knowledge is correct (and it may very well not be) those selectors should only effect things directly inside the div, things inside a custom class I created should override those selectors. Why is it not happening?
Btw I've tried moving the CSS selector all throughout the stylesheet, I've tried specifying li.activePage instead. I've tried putting it in bootstrap.css (it's not the stylesheet itself, other rules have been applied correctly) It seems that there is something I'm not understanding here.
Considering Specificity
This is occurring due to CSS Specificify Rules, which govern how styles target certain elements and how decisions are made regarding conflicts should be resolved between them.
The Bootstrap style that is being applied to your element more specifically describes the element it is targeting as you can see by the multiple nesting :
.navbar-inverse .navbar-nav li a {
color: #9d9d9d;
}
This is much more specific than the broad style that you are currently using :
a.activePage {
color: blue;
}
Possible Approaches for Overriding
There are a few ways to ensure that your style properly overrides the existing Bootstrap one :
!important option below).navbar-inverse .navbar-nav li a.activePage)!important modifier to your style to give your style precedence.You can work around this quite easily to ensure that you want your style to be applied by using the !important modifier :
/* Example using a more specific style */
.navbar-inverse .navbar-nav li a.activePage {
color: blue;
}
/* Example using the !important modifier */
a.activePage {
color: blue!important;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments