You will use the layout example from Chapter 2, Using Variables and Mixins, to study nesting of rules in more detail.
To do this, you must first open http://localhost/index.html in your browser and then open less/sidebar.less in your text editor.
Anchors are added to the menu items. This means that the HTML code of the side menu now looks like the following code:
<aside id="sidemenu">
<h2>Side menu</h2>
<ul>
<li><a href="page1.html">item 1</a></li>
<li><a href="page2.html">item 1</a></li>
</ul>
</aside>You need a selector for each rule to style the different elements in CSS as can be seen in the following code:
#sidebar h2{
color: black;
font-size: 16px;
}
#sidebar ul li a{
text-decoration: none;
color: green;
}As you can see, both the ul (including the li element and the a anchor) element and the h2 element are the children of the aside element with the #sidemenu ID. CSS...