Nested rules

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