The Parent Selector &
Reference the enclosing selector with the ampersand.
Syntax
&:hover { } &--modifier { } .context & { }The parent selector & refers to the selector of the enclosing rule. It is essential for states and modifiers because it attaches to the parent without a space.
Common uses
- Pseudo-classes:
&:hover,&:focus. - BEM modifiers:
&--large,&__icon. - Contextual styles:
.dark-theme &puts the parent inside another selector.
Example
.button {
background: #CC6699;
color: white;
&:hover {
background: #b35081;
}
&--ghost {
background: transparent;
color: #CC6699;
}
.dark-theme & {
box-shadow: 0 0 0 1px white;
}
}
/* .button:hover, .button--ghost, .dark-theme .button */When to use it
- A developer uses & to append pseudo-classes like :hover and :focus directly inside a component block without leaving the nesting context.
- A BEM author writes &__element and &--modifier inside a block rule so the full class names are generated while the source stays clearly structured.
- A developer attaches a body-level theme class like .theme-dark & to a nested rule so the component adapts to the theme without a separate rule block.
More examples
Pseudo-class with the parent selector
Appends :hover, :active, and :focus to the parent .btn selector using &, generating correct compound selectors in the output.
.btn {
background: #2563eb;
color: white;
&:hover { background: #1d4ed8; }
&:active { background: #1e40af; }
&:focus { outline: 2px solid #93c5fd; }
}BEM modifiers with the ampersand
Uses & with BEM double-dash modifier suffixes to produce .button--primary, .button--outline, and .button--disabled.
.button {
padding: 0.5rem 1rem;
border-radius: 4px;
&--primary { background: #2563eb; color: white; }
&--outline { border: 2px solid #2563eb; color: #2563eb; }
&--disabled { opacity: 0.5; cursor: not-allowed; }
}Parent context with ancestor class
Reverses the nesting with .theme-dark & so that when .theme-dark is on a parent element, the card's colors switch automatically.
.card {
background: white;
color: #111;
.theme-dark & {
background: #1e293b;
color: #f1f5f9;
}
}
Discussion