Working with 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 of the side menu now looks like the following code:

<aside id="sidebar">
  <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) and the h2 elements are the children of the aside element with the #sidebar ID. CSS doesn...