Deep Dive into the & Nesting Selector in CSS Preprocessors: From LESS to Modern CSS Nesting

Fundamental Concepts and Evolution of Nesting Selectors

In modern frontend development, CSS preprocessors like LESS and SASS have significantly enhanced the maintainability and development efficiency of stylesheets. Among their features, nesting syntax is one of the most popular, with the & selector playing a crucial role as a core component of this syntax.

Case Analysis: .clearfix in Twitter Bootstrap

Let's begin by examining a typical use case found in Twitter Bootstrap source code:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

This code actually uses LESS syntax, not native CSS. The & character is a special nesting selector used to reference the parent selector within nested rules.

Compilation Mechanism of the & Selector

When using the & selector, the compilation process directly appends the nested selector to the parent selector without adding extra whitespace. Taking the above code as an example:

.clearfix {
  &:before {
    content: '';
  }
}

Compiles to:

.clearfix:before {
  content: '';
}

This compilation mechanism ensures that the :before pseudo-element is directly attached to the .clearfix class, forming a compound selector. Conversely, if the & selector is omitted:

.clearfix {
  :before {
    content: '';
  }
}

Compiles to:

.clearfix :before {
  content: '';
}

In this case, the selector becomes a descendant selector, matching :before pseudo-elements inside .clearfix elements, which is typically not the intended behavior.

Diverse Applications of the & Selector

The application of the & selector extends far beyond pseudo-elements; it can be used to construct various compound selectors. For example:

h1 {
  &.class {
    color: red;
  }
}

Compiles to:

h1.class {
  color: red;
}

This pattern is particularly useful when implementing CSS methodologies like BEM (Block Element Modifier), as it clearly expresses the relationships between selectors.

The & Selector in Modern Native CSS Nesting

With the standardization of the CSS Nesting Module, modern browsers have begun supporting native CSS nesting syntax, where the & selector continues to play a central role. In native CSS nesting:

.parent-rule {
  &:hover {
    background-color: #f0f0f0;
  }
}

Is parsed as:

.parent-rule {
  /* Parent rule properties */
}
.parent-rule:hover {
  background-color: #f0f0f0;
}

If the & selector is not used:

.parent-rule {
  :hover {
    background-color: #f0f0f0;
  }
}

The browser automatically adds whitespace, parsing it as:

.parent-rule {
  /* Parent rule properties */
}
.parent-rule *:hover {
  background-color: #f0f0f0;
}

This results in styles being applied to any hovered element inside .parent-rule, rather than to the .parent-rule element itself.

Context Reversal with the & Selector

An interesting application is placing the & selector at the end of a nested rule to reverse the selector context:

.card {
  .featured & {
    border: 2px solid gold;
  }
}

Compiles to:

.card {
  /* .card styles */
}
.featured .card {
  border: 2px solid gold;
}

This pattern is particularly practical when needing to adjust child element styles based on parent container states.

Selector Specificity and Limitations

When using the & selector, it's important to pay attention to selector specificity calculation. Selectors in nested rules have the same specificity weight as if they were within an :is() function. Additionally, the & selector has an important limitation: it cannot represent pseudo-elements.

For example, the following code will not work correctly:

.foo::before {
  content: "Hello";
  .important & {
    color: red;
  }
}

Because .important :is(.foo::before) cannot match any elements. This limitation also applies to scenarios like nested @media rules.

Practical Application Scenarios and Best Practices

In practical development, the & selector excels in the following scenarios:

• Pseudo-classes and Pseudo-elements: Ensuring pseudo-classes are directly attached to parent selectors
• State Classes: Combining state classes like .active, .disabled, etc.
• Responsive Design: Maintaining selector context within media queries
• Component-Based Development: Building self-contained component styles

Best practices include: maintaining reasonable nesting depth, avoiding overuse of the & selector leading to high specificity, and being mindful of browser compatibility.

Conclusion and Future Outlook

The & nesting selector, as a core feature of CSS preprocessors and modern CSS nesting, significantly enhances the readability and maintainability of stylesheets by explicitly defining relationships between parent and child rules. From initial implementations in LESS and SASS preprocessors to current native CSS support, the concept and implementation of the & selector continue to evolve, providing frontend developers with more powerful tools for organizing styles. A deep understanding of its working principles and application scenarios is essential for writing high-quality, maintainable CSS code.