genomics-geek genomics-geek - 7 months ago 9
HTML Question

why doesn't block <a> within <li> accept color set in css file?

I am trying to understand how to change color of "a" tags within "li" elements. I have the following unordered list:

<nav class="navbar navbar-default navbar-fixed-top">
...
<ul class="nav navbar-nav navbar-left">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
...
</nav>


Why does the following work:

.navbar-default .navbar-nav li a {
color: #333333;
}

.navbar-default .navbar-nav li a:hover {
color: #EC5216;
}


But not:

li a {
color: #333333;
}

li:hover a {
color: #EC5216;
}


nor:

a {
color: #333333;
}

a:hover {
color: #EC5216;
}


I have read this post, but it is still unclear. Thanks ahead of time for the answers!

Answer

That is because

.navbar-default .navbar-nav li a {
 color: #333333;
}

.navbar-default .navbar-nav li a:hover {
color: #EC5216;
}

has more weight and is more specific than

li a {
color: #333333;
}

li:hover a {
color: #EC5216;
}
a {
color: #333333;
}

a:hover {
color: #EC5216;
}

Please read more on CSS specificity.. https://developer.mozilla.org/en/docs/Web/CSS/Specificity