Question

In my ul, I want list bullets by default, but I’d like to be able to selectively give individual li‘s a class that causes them to not to utilize the ul‘s list-style-image. Right now, my CSS for the given ul looks like this:

.monthly-menu td ul {
    margin: 0 15px 15px 20px;
    list-style-image: url('../images/menus/menu-bullet.png');
}

Is there a style I can add to li‘s so that they won’t inherit the bullet image from the ul?

Answer 1

You can add a specific class/id to the li and then add list-style-image: none to the CSS for the corresponding class/id. Example:

HTML

<ul>
    <li class="noImage">Text here.</li>
    <li>Text here.</li>
</ul>

CSS

ul {
    list-style-image: url('../images/menus/menu-bullet.png');
}

.noImage {
    list-style-image: none;
}

​
JS Fiddle: http://jsfiddle.net/YrEM4/1/