html - Change navbar text color Bootstrap -

i have piece of html represents relevant part of navbar:

<nav class="navbar navbar-inverse" role="navigation">     <div class="container">         <ul class="nav navbar-nav navbar-right">             <li><a href="#"><span class="glyphicon glyphicon-user"></span> about</a></li>             <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> contact</a></li>             <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> portfolio</a></li>             <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> r&eacute;sum&eacute;</a></li>         </ul>     </div> </nav> 

and have piece of css hoping use change text color of navbar:

.nav.navbar-nav.navbar-right {     color: blue; } 

the problem text color remains unchanged. saw similar question went unsolved. bet whoever can solve 1 can solve other too.

make following:

.nav.navbar-nav.navbar-right li {     color: blue; } 

the above target specific links, want, versus styling entire list blue, doing. here jsfiddle.

the other way creating class , implementing so:

html

<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> r&eacute;sum&eacute;</a></li> 

css

.color-me{     color:blue; } 

also demonstrated in jsfiddle