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
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
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: >