Question

This is a very simple issue of CSS specificity, but I really can’t figure it out somehow.

In my stylesheet, I have a simple rule that removes the list-style from lists:

ul { list-style: none; }

Then, for some lists, I would like to specify a list-style, but no matter what, it just won’t override the above rule?

#product ul { list-style: bullet !important; }

The problem is that the UL will often be entered into a WYSIWYG box in a CMS and I don’t want to force the user to have to write in html and give the UL a specific ID, so we will often end up with code such as:

<div id="product">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

I’m a little surprised this just isn’t working, is there no way to remedy this other than using javascript to give $(‘#product ul’) a specific class or css style?

—

JSBIN: http://jsbin.com/ohuzuz/4

—

EDIT: Oops, sorry, I had:

<div id="#product">

a temporary mistake that was in the jsbin, but not my original code. My mistake, but the problem was indeed the invalid

list-style: disc

Answer 1

bullet is not a valid list-style-type value.

Also, if that isn’t the issue, check if you don’t have li styled anywhere. Styles for li elements override those for ul elements, no matter the specificity.