The Parent Selector (&)

The parent selector & represents the complete outer selector at the nesting location. It is especially useful for component states, pseudo-classes, pseudo-elements, and naming conventions.

Common patterns include:

&:hover for hover states.
&:focus-visible for keyboard-visible focus states.
&::before for pseudo-elements.
&.is-active for an element that has both the parent class and a state class.
&__title for BEM-style element naming.

The parent selector is not always equivalent to inserting a space. Compare &.active, which combines classes on the same element, with .active, which is a descendant selector when nested under another class.

Component States and BEM

.button {
  background: #cc6699;

  &:hover {
    background: #ad4f80;
  }

  &:focus-visible {
    outline: 3px solid #333;
    outline-offset: 3px;
  }

  &.is-active {
    font-weight: 700;
  }

  &__icon {
    margin-inline-end: 0.5rem;
  }
}

💡 The generated selectors are .button, .button:hover, .button:focus-visible, .button.is-active, and .button__icon. Notice the distinction: &.is-active selects one element with both classes, whereas &__icon constructs a class name using the parent selector text.

Knowledge Check

Which selector does `&.is-active` generate inside `.button`?

The Parent Selector (&)

STAY UPDATED WITH BYTES!