CSS: bullet styles on lists

Question

Why isn't the following working? I want the ul style to be mostly unbulleted (due to inherited code), but occasionally to be able to use it as a traditional bulleted list. So I've defined a special class for bulleted lists.

ul li {padding:0 0 0.5em 0; margin-left:0; list-style-type:none;}
ul.bulleted {padding:0 0 0 0; list-style-type: disc; color:red;}

The HTML:

<p>Intro text:</p>
        <ul class="bulleted">
            <li>blah</li>
            <li>blah</li>
            <li>blah</li>
        </ul>

This shows the list with red text, as expected: but without any bullets!

Baffled :(

Answer 1

The problem is that your first style applies to the li items and removes their bullet, while the second applies to the `ul item ...

make your first rule ( by removing the li )

ul {padding:0 0 0.5em 0; margin-left:0; list-style-type:none;}

or your second

ul.bulleted li {padding:0 0 0 0; list-style-type: disc; color:red;}

depending on how other rules apply ..

Answer 2

ul li is more specific than ul.bulleted so it therefore takes precedence.

Try using ul.bulleted li for the second set of rules instead.

That will make it even more specific than the first rule, and allow it to be applied.