css selecting lists and list items

Question

I have a css file that has a section that looks like

.mylist ul { ..configuration .. }
.mylist li { ..configuration .. }

If the html looks like

<div class="mylist">
  <ul>
    <li>item1</li>
  </ul>
</div>

The styling is applied properly.

If I do

  <ul class="mylist">
    <li>item1</li>
  </ul>

It does not seem to be.

Why do I need that extra div tag? Shouldn't the styling apply the same way in either case?

Answer 1

Because .mylist ul means an ul as subitem of .mylist.

Try this:

ul.mylist { ..configuration .. }
ul.mylist li { ..configuration .. }

With:

<ul class="mylist">
  <li>item1</li>
</ul>

Hope this helps.