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

Question

which is better to 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 the correct menu ul li or menu li ?

Answer 1

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 an obsolete menu tag ( <menu> )?

If you just talk about your css code, these are not tags, they are selectors. And I would go with the most specific selector available to avoid random assignments

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

even better:

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

or if you have several menus:

 #menubar > .menu > ul > li{ } 

because otherwise you have surprises, you might have this structure: (this is ugly, I know, but just to prove the 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 abc or xyz elements).

Answer 2

It doesn't make any difference until you have to interact with other similar selectors in the same stylesheet - and then it depends on what those selectors are.

Answer 3

It depends. If you have ol and ul inside .menu , you'll want to use the more specific .menu ul li . Otherwise .menu li is fine. You may like to read the CSS spec .

Answer 4

If you are not going to also order lists ( <ol> ) inside .menu containers, the result will be the same. Some will probably say that one is faster than the other, but that doesn't matter (and it's hard to prove that it can differ in every browser).

Answer 5

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

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

This is a great way to keep your CSS only at the right level of specificity, while maintaining flexibility in the HTML structure to which it can relate.

Answer 6

Mozilla Devcenter recommends using .menu li . You can learn more about Writing Effective CSS and Css Code Optimization. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 } #menu { display: block; margin: 0; padding: 0 } #menu { display: block; margin: 0; padding: 0 } .