LESS Nesting

What Is Nesting in LESS?

In plain CSS, related selectors must be written out in full every time: .nav, .nav li, .nav a. LESS lets you nest li and a inside .nav's curly braces instead, and the compiler expands them back into standard CSS selectors.

Nesting works for any combination of descendant selectors, pseudo-classes, pseudo-elements, and media queries, keeping visually related rules physically grouped together in the source.

.nav {
  background: #111;

  li {
    display: inline-block;
  }

  a {
    color: white;

    &:hover {
      color: #2563eb;
    }
  }
}

Compiles to .nav { }, .nav li { }, .nav a { }, and .nav a:hover { }, four separate rule sets from one nested block.

Nesting Syntax

.parent {
  property: value;

  .child {
    property: value;
  }
}

• A nested selector compiles to the descendant combinator by default (a space between parent and child).
• Use & to reference the parent selector directly, without a space, for pseudo-classes and suffixes.
• Media queries can be nested inside a selector; LESS hoists them to the top level automatically.
• Nesting depth is unlimited syntactically, but should be kept shallow for maintainable output.

LESS Nesting Cheatsheet

Common nesting patterns and what they compile to.

Using & Inside Nested Rules

The & symbol always refers to the full compiled selector of its enclosing block. Without &, a nested selector is joined to its parent with a space (a descendant selector). With &, it's joined directly, with no space.

.btn {
  &:hover { opacity: 0.9; }   // .btn:hover
  &.active { font-weight: 700; } // .btn.active
  &-icon { margin-right: 4px; }  // .btn-icon
}

Nesting Media Queries

LESS allows @media blocks to be written inside a selector, keeping responsive overrides next to the base styles they modify. The compiler automatically lifts the media query out to the top level of the compiled file.

.sidebar {
  width: 100%;

  @media (min-width: 768px) {
    width: 260px;
  }
}

Compiles to a top-level @media block containing .sidebar { width: 260px; }.

Avoiding Over-Nesting

It's tempting to mirror an entire HTML tree with nested LESS selectors, but each additional nesting level increases the specificity and length of the compiled selector, making later overrides harder.

• Keep nesting to 3 levels or fewer as a general guideline.
• Prefer flatter selectors combined with BEM-style class names for deeply structured components.
• Reserve deep nesting for tightly scoped, rarely-overridden internal component styles.

Common Mistakes

• Nesting selectors 5+ levels deep, producing compiled CSS selectors that are difficult to override later.
• Forgetting & and accidentally creating an unwanted descendant selector instead of a suffix or pseudo-class.
• Not realizing nested @media blocks are hoisted, and being confused when they don't appear inline in devtools.
• Mirroring an entire HTML document structure in nested LESS instead of using flatter, BEM-style class names.

Key Takeaways

• Nesting lets you write child selectors inside a parent's braces, compiling to standard descendant selectors.
• Use & to attach pseudo-classes, modifiers, or suffixes directly to the parent selector without a space.
• Media queries can be nested inside a selector; LESS hoists them to the top level automatically.
• Keep nesting shallow, ideally 3 levels or fewer, to avoid overly specific compiled selectors.