CSS #id ul li vs #id li

HTML & CSS
1

This is probably a rather simple question but if anybody could shed some light it’d be much appreciated.

Given the following HTML

<div id="main_menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>

And the CSS

#main_menu {}
#main_menu ul {
display: inline;
}
#main_menu li {
display: inline;
}

What’s the difference between writting

#main_menu ul li {}

and

#main_menu li {}

Cheers!

2

It’s just following the path. I always just say #id li. You already know it’s in the ul so why say it? In other codes it makes it easier to follow down the road. Like #id span.yada {}. but not nessary in your example.

Note: if it’s a nested ul and your targeting the second level then yes you’d use it and say #id ul ul li {}.

3

there is also one added benefit Eric forgot. tho it’s kinda tough to think of a practical example right now, it is a good thing to have in your bag of tricks Aside from being simple to read, it also uses less tags which mean it’s less specific. Specificity is determined by the sum of IDs+ classes + tags

so the rule #main_menu ul li {} targets the SAME as#main_menu li {} but has precedence over the latter. This can come in handy some times and keep you from having to employ the dreaded “! important” in your code later on.

4

I became a master of specificity when I spent weeks customizing my js-kit echo and Disqus comments on my sites. Those widgets create a huge amount of nested codes that had to be tracked down with firebug and overridden.

5

Eric,
my post was not meant to question yours or anyone else’s level of expertise; it was merely to expound on what you said.

God knows those widgets do write millipede like code. Which is why I was suggesting to the original poster, that making a HABIT of coding the general rules with less specificity aids later on. As in trying to discern why #someID ul li { } is conflicting with #someID li li{}, for example. My sincere apologies if you felt your toes were stepped on.

6

Oh no. No worries. I didn’t take it like that. :slight_smile: Your comment just reminded me of the specificity nightmare I entered when I did that.