cssLess – Nesting

You’re already familiar with the concept of nesting from writing HTML. When you write a list in HTML, the li element is nested inside of another HTML element (either ul or ol):

<ul> <!-- parent element -->
  <li>List item</li> <!-- nested child element -->
</ul>

With Less, you can do something similar with selectors when assigning CSS properties.

Nesting selectors

Nesting selectors in Less has the same logic as the HTML above. The following is valid Less:

ul {
  li {
    background-color: silver;
  }
}

When compiled to CSS, the resulting code will look like this:

ul li {
  background-color: silver;
}

This is helpful, as it lets you write less code, but it definitely can be taken to an extreme. It is not necessary or helpful for your Less to mirror your exact HTML structure.

For example, if you had the following HTML:

<header class="container site-header">
  <a href="#" class="site-name">Site name</a>
</header>
<nav class="container site-nav">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

And if you wanted to modify the text-decoration property on the a element inside that list, you should not do this:

❌ Don’t do this

nav.site-nav {
  ul {
    li {
      a {
        text-decoration: none;
      }
    }
  }
}

Writing your Less like that would result in the following CSS:

nav.site-nav ul li a {
  text-decoration: none;
}

This is an overly specific selector, which was warned against in the reading you did on the cascade in CSS.

Since the Less you write is transformed into CSS, the same rules and best practices should still be kept in mind.

Instead, write your Less like so:

.site-nav {
  a {
    text-decoration: none;
  }
}

Which will result in this much more reasonable selector in your CSS: .site-nav a

When nesting, stick to 2 layers, 3 at the max. Otherwise, things get unweildy.

Parent selector

In Less, the ampersand (&) is called the parent selector and can be used when nesting your code to reference the outer selector.

A demonstration using the parent selector with pseudoclasses will help make this clearer; if you write the following Less:

a {
  color: orange;
  &:hover, &:focus {
    color: red;
  }
}

It will result in the following CSS:

a {
  color: orange;
}
a:hover, a:focus {
  color: red;
}

Here, you can see that the ampersand gets replaced by the a element, completing the hover and focus effect styles on the link.

Like other nesting rules, the parent selector is powerful, but can get convoluted. Using it for hover and focus effects is recommended because it allows you to nest those effects within the parent selector, but you don’t have to invent additional clever ways of using this, especially as you’re starting out with Less.

Nesting demonstration

This stylesheet refactors the code from the lessons on organizing your CSS and Less variables. Taking just the header and navigation elements styles, I’ve updated them to use Less nesting. I’ve commented out the original CSS so you can still see what and how I modified the code. Look for changes specifically starting on line 64:

This refactor includes examples of both types of nesting:

⇐ back to Less intro