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

```