CSS & Nesting Selector

The & nestingselector is a special reference used inside CSS nesting to represent the parent selector of the current nested rule. It allows you to write styles in a more structured, readable, and hierarchical way - similar to how elements are visually grouped in HTML - while still compiling down to valid, flat CSS. Instead of repeating long selectors, the & acts as a placeholder for whatever selector exists at the current nesting level, making complex selector relationships easier to understand and maintain.

The & nesting selector becomes especially powerful when creating state-based, modifier, or contextual styles. For example, it’s commonly used when defining hover states, active states, or variations such as .button--primary. When nested, the & is replaced by the full parent selector during parsing. This means it can appear at the start, middle, or end of a selector, allowing flexible combinations such as .card &, &:hover, or &.active. When paired with pseudo-classes like :hover, the result is cleaner and more maintainable than repeating the full selector each time.

The & nesting selector also works well with combinators such as the Child Combinator (>) child selector, enabling precise structural relationships without losing readability. This is particularly useful when styling components that rely on internal structure, such as cards, navigation menus, or alerts. Because the nesting visually mirrors the DOM hierarchy, it reduces cognitive load and helps prevent selector errors. When combined with properties like color or background-color, the intent of each rule becomes immediately clear.

Here’s a simple example showing how the & nesting selector works in practice:

.card {
  padding: 1rem;
  border: 1px solid #ccc;

  &.featured {
    border-color: gold;
  }

  &:hover {
    background-color: #f9f9f9;
  }

  .title & {
    color: red;
  }
}

In this example, the & represents .card in every nested rule. This allows you to define variations and interactions without rewriting the selector repeatedly. When used thoughtfully, the & nesting selector helps create cleaner, more scalable CSS that closely reflects the structure of your HTML, such as elements like div or button.