CSS selectors: (menu ul li) or (menu li)

Question

which is better for use

.menu{
    float:left;
    width:600px;
    height:25px;
    background:url(bg.png) repeat-x;

}
.menu ul{
    float:left;
}
.menu ul li{
    float:left;
    width:150px;
    height:25px;
    background:#F00;
}

or

.menu{
    float:left;
    width:600px;
    height:25px;
    background:url(bg.png) repeat-x;

}
.menu ul{
    float:left;
}
.menu li{
    float:left;
    width:150px;
    height:25px;
    background:#F00;
}

which tag is right menu ul li or menu li?

Answer 1

It makes no difference until you have to interact with other, similar selectors in the same stylesheet — and then it depends on what those selectors are.

Answer 2

Unless you're going to also have ordered lists (<ol>) inside .menu containers, the result is exactly the same. Some will probably say one is faster than the other, but that is irrelevant (and hard to prove as it may differ in every browser)

Answer 3

It depends. If you've got an ol and a ul within .menu you'll want to use the more specific .menu ul li. Otherwise, .menu li is fine. You might like to read up on CSS specifity.

Answer 4

When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?

If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments

.menu > ul > li{
    // this matches only list items directly inside a ul directly inside a .menu
}

even better would be this:

#menu > ul > li{
    // now you are referencing the menu by id, so you know this is a unique assignment
}

or, if you have multiple menus:

#menubar > .menu > ul > li{
}

because otherwise you are in for surprises, you might actually have a structure like this: (this is ugly, I know, but just to prove a point)

<div class="menu">
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3
        <ul>
            <li id="abc">Menu Item abc</li>
        </ul>
        </li>
        <li>Menu Item 4
        <div><div><div><ol><li><div><ul>
                <li id="xyz">Menu Item xyz</li>
        </ul></div></li></ol></div></div></div>
        </li>
    </ul>
</div>

(you probably don't want to match items abc or xyz).

Answer 5

Your selectors should match your intent - if you mean for any list item, regardless of whether it's inside a UL or OL to be styled the same, then example B. If it's only UL LI's you want to style, then A.

This is a fairly simple example, but this is a useful rule of thumb. Ask yourself "If someone came and stuck an ordered list inside .menu, how would I want it to look?

It's a great way to keep your CSS to just the right level of specificity, while maintaining flexibility in the HTML structure it can apply to.

Answer 6

Mozilla Devcenter recommend to use .menu li. You can red more about Writing Efficient CSS and optimizing css code. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 }.