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?

Raisch · Accepted Answer · 2012-08-03 17:33:56Z

3

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.

answered Aug 3, 2012 at 17:33

Raisch

8116 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ding ding ding! You got it. You can also just remove the ul.mylist and go for the unadulterated .mylist, .mylist li

@TimBolton - Your absolutly correct. Both ways works fine in this case.