CODEWITHSUNDEEP
csshtml-lists
B Robster
B Robster

Reputation: 42063

how to selectively supress list-style-image for some li's

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?

Upvotes: 0

Views: 1005

Answers (1)

JSW189
JSW189

Reputation: 6325

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/

Upvotes: 2

Related Questions