how to style this via css in Bootstrap

Question

I'd like to override the nav link-color in a role=presentation for a nav list. I'd like to set it to yellow. I am only looking to select this one instance.

the html:

<ul class="nav nav-pills nav-stacked">
  <li role="presentation"><a href="about.html">About</a></li>

I have:

li[role=presentation] a:link{
  color:yellow;
}

But this doesn't work. Any ideas on how to get this to work?

Answer 1

take the :link out of your css selector

li[role=presentation] a{
  color:yellow;
}

<ul class="nav nav-pills nav-stacked">
    <li role="presentation"><a href="about.html">About</a></li>
    <li role=""><a href="about.html">About</a></li>
    <li role="presentation"><a href="about.html">About</a></li>
</ul>

Answer 2

Try:

li[role="presentation"] a{
  color: yellow !important;
}