CSS: changing the color of a bullet in a list?

Question

I have a problem with changing the color of a bullet in a list.

So I have a list inside a <nav> tag in my HTML file:

<nav id="top-menu">
    <ul>
        <li> <a href="">Home</a> </li>
        <li><span> <a href="">Products</a> </span></li>
        <li> <a href="">Statistics</a> </li>
        <li> <a href="">Countries</a> </li>
        <li> <a href="">Settings</a> </li>
        <li> <a href="">Contacts</a> </li>
    </ul>
</nav>

So as you can see my <nav> tag has an id="top-menu" . And one more thing:

<li><span> <a href="">Products</a> </span></li>

Here you can see that I put a <span> tag inside my bullet.

Here is my CSS file:

nav#top-menu {
    width: 100%;
    height: 33px;
    background-color: #696969;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: tahoma, sans-serif;
    font-size: 20px;
    text-align: center;
    background-color: #696969;
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: #696969 solid 2px;
}


#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }

Then I add this:

#top-menu ul li span {
    color: black;
}

The problem is it doesn't change anything.

In other words for now every bullet in my navigation menu is white but I want to make "Products" black.

What am I doing wrong?

Thanks.

Answer 1

Try this way

#top-menu ul li   span  a{
    color: black;
}

Demo

Answer 2

Usually such modifications are done using a class instead of altering the html markup structure. I added a class "highlight" to the item:

http://jsfiddle.net/bvedE/1/

HTML markup:

<nav id="top-menu">
    <ul>
        <li> <a href="">Home</a> </li>
        <li class="highlight"> <a href="">Products</a> </li>
        <li> <a href="">Statistics</a> </li>
        <li> <a href="">Countries</a> </li>
        <li> <a href="">Settings</a> </li>
        <li> <a href="">Contacts</a> </li>
    </ul>
</nav>

CSS code:

#top-menu ul li.highlight * {
    color: black;
}

With a slight modification at the bottom of the css you get what you are looking for.

Answer 3

try this

http://jsfiddle.net/QZD5d/

CSS

nav#top-menu {
    width: 100%;
    height: 33px;
    background-color: #696969;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: tahoma, sans-serif;
    font-size: 20px;
    text-align: center;
    background-color: #696969;
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: #696969 solid 2px;
}


#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }

#top-menu ul li span a{
    color:black
}

Answer 4

Try this:

#top-menu ul li span a{
    color: black !important;
}