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;
}

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.

[jsFiddle demo](http://jsfiddle.net/roryokane/tWGge/) to play with — Rory O'Kane, Jul 23 '13 at 20:25
Why not simply add a class to teh specific `li` you want to change properties for? — Mike Brant, Jul 23 '13 at 20:28
do you add a span-tag to mark it as active? in this case you might set a class like

score 5 · Accepted Answer · answered Jul 23 '13 at 20:28

5

to style bullets you could try doing:

    ul { list-style: none; }

    li:before { content:"\2022 \00A0"; color: blue; }

DEMO

answered Jul 23 '13 at 20:28

BobbyZ

336
2
8

score 4 · Answer 2 · edited May 23 '17 at 12:14

how about this post: How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
excerpt:

li:before {
    content: "• ";
    color: red; 
}

in your case

#top-menu ul li span:before {
    content: "• ";
    color: black; 
}
#top-menu ul li:before {
    content: "• ";
    color: someOtherColor; 
}

Update: adding a fiddle with red dots and a single black one, so you can easily switch the active one red/black demo fiddle I'm using a class to define the active item

#top-menu ul li.active:before { content: "• "; color: black; }
#top-menu ul li:before { content: "• "; color: red; }

Changing the color of a bullet in a list?

2 Answers2

DEMO