Changing Text Color In CSS With Bootstrap (Nav-pills)

Question

I was using bootstrap to make a website with bootstrap when I encountered a small problem. I was trying to change the color of the text in my navigation bar (pills):

HTML:

<nav>
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </nav>

CSS:

.nav-pills a{
color:white;
}

(This code solved my problem, but I have some questions below.)

I was wondering why in the CSS I have to reference the .nav-pills class (why not just .nav), and why I have to reference the a (link tag) in order to get the color of the text to change. (When I tried to change the a (link tag) to li (list tag), the color of the text did not change.)

Answer 1

The reason is because of order of precendence -- For a full undertanding read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity .

As far as the specific style you asked about, if you look in the bootstrap repo, you will see the following two rules:

https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4035

https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4148

The first is for anchors in .nav sections and the second one for anchors in .nav-pills. Therefore the second one overrides the first, and in order for your styles to override it, it has to be at least as specific or more as the second.

Answer 2

When you have a look at bootstrap.css (the file that sets those values before you do) you will see that the color is set for .nav-pills > li > a

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    color: #fff;
    background-color: #3276b1
}

So, if you set the color to .nav, this will be overriden by the .nav-pills class' style declaration.

If you would change your code to

.nav {
    color: white !important;
}

You would override the more exact selector, but you should avoid using !important whenever possible as it makes your code harder to maintain.

Answer 3

you have to reference the " .nav-pills a " class because that's the section you are trying to style . If you just put .nav without adding the -pills a, then the code wouldn't make sense thus nothing would happen.

Answer 4

I was wondering why in the CSS I have to reference the .nav-pills class (why not just .nav), and why I have to reference the a (link tag) in order to get the color of the text to change. (When I tried to change the a (link tag) to li (list tag), the color of the text did not change.)

You will override the class nav in bootstrap, it's better to make you own class so you have your own control in the specific class attribute. The link tag(a) have the css color properties that cannot override just using the list tag because the text is inside of the link tag(a).