LESS Parent Selector

How & Resolves at Each Nesting Level

& always represents the fully compiled selector of its immediately enclosing block, not just the nearest single selector. When selectors are nested multiple levels deep, each & resolves relative to its own level, not the outermost one.

This makes & composable: you can use it repeatedly across nested levels, and each usage correctly reflects its local context.

.card {
  &.featured {
    border-color: gold;

    &:hover {
      box-shadow: 0 0 0 2px gold;
    }
  }
}

Compiles to .card.featured { } and .card.featured:hover { }, each & resolving relative to its own nesting level.

Parent Selector Patterns

&:hover          // pseudo-class
&.active         // additional class
&-icon           // BEM-style suffix, no space
&--large         // BEM-style modifier
& + &            // adjacent sibling combinator
&& , & &         // rarely used, double ampersand or explicit descendant

• No space between & and a following pseudo-class, class, or suffix compiles to a compound selector.
• A space between two & symbols compiles to a descendant combinator.
• & + & is a common pattern for styling an element only when it follows a sibling of the same type.
• & can appear multiple times within a single nested rule for advanced combinator patterns.

Parent Selector Cheatsheet

Common & patterns and their compiled output.

BEM Naming with &

The & selector pairs naturally with BEM (Block, Element, Modifier) naming conventions, since &__element and &--modifier let you write an entire BEM component's structure inside a single nested block instead of repeating the block name everywhere.

.card {
  padding: 1rem;

  &__title {
    font-weight: 700;
  }

  &__body {
    color: #4b5563;
  }

  &--featured {
    border: 2px solid gold;
  }
}

Compiles to .card, .card__title, .card__body, and .card--featured, all without repeating .card manually.

Combinators with &

& can be combined with sibling and descendant combinators to express relationships between elements sharing the same class, a common pattern for adding spacing between repeated list-like items.

.list-item {
  & + & {
    margin-top: 0.5rem; // spacing only between consecutive items
  }
}

Reversed Nesting with &

Placing & after another selector, rather than at the start, reverses the usual nesting direction, letting you style a class differently depending on an ancestor without writing the ancestor selector at the top level.

.card {
  .dark-theme & {
    background: #111;
    color: white;
  }
}

Compiles to .dark-theme .card { ... }, styling .card only when nested inside .dark-theme.

Common Mistakes

• Adding a space between & and a suffix or modifier by accident, turning an intended compound selector into a descendant selector.
• Overusing BEM modifiers nested many levels deep, producing selectors far more specific than the actual BEM convention intends.
• Forgetting that & + & only matches when a second element with the exact same class immediately follows the first.
• Not realizing & can appear after another selector to reverse the nesting relationship.

Key Takeaways

• & resolves to the fully compiled selector of its immediate enclosing block at each nesting level.
• BEM element and modifier suffixes (&__element, &--modifier) pair naturally with &.
• & + & and & ~ & combinators style an element based on its relationship to sibling elements.
• Placing & after another selector reverses the nesting direction, styling based on an ancestor.