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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Working with nested rules

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Working with nested rules

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access