What's the diff betw li#navigation and #navigation li?

HTML & CSS
1

Hi guys,

I’ve been reading and trying out CSS but still can’t understand this part.

What is the difference between :


li#navigation {
   font-weight: bold;
}

and


#navigation li{
   font-weight bold;
}

Can anyone help here?

Thanks

2

Hi, and welcome to SitePoint.

This is an important question.

li#navigation is a sort of longer version of #navigation:
it means there’s a li with the id of “navigation”:

<li id=“navigation”>foo</li>

(#navigation would be parsed a little bit faster in the browser than li#navigation, but sometimes you’ll see people do div#someID simply so that they know what kind of element is being targetted when they’re reading CSS… so might be better for some humans, but not better for browsers)

#navigation li (note the space) means a li who is a descendant of someone with the id of “navigation” (usually a ul, but can be any ancestor actually):

<ul id=“navigation”>
<li>foo</li>
…
</ul>

Note that #navigation li hits any descendant li, so this would hit submenus:

<ul id=“navigation”>
<li><a href=“products”>Products</a>
<ul>
<li>This product also hit by that rule</li>
<li>This product also hit by that rule</li>
<li>This product also hit by that rule</li>
<li>This product also hit by that rule</li>
</ul>
</li>
…
</ul>

Basically, the important thing to know is that when listing CSS rules, the space is actually a type of selector (“general descendant selector”), and not just there for readability. Compare to the direct-child descendant selector: >