🔗 Understanding “&” in CSS Nested Selectors — Complete Tutorial

🌐 What Is the & (Ampersand) in CSS Nesting?

The & symbol is used inside CSS Nesting to reference theparent selector. It allows you to build more complex selectors while keeping your code clean, structured, and easy to read — similar to SCSS.

>>“The ampersand (&) lets nested CSS inherit, extend, and combine selectors naturally.”

Note

✔ Works in native CSS Nesting (no SCSS required)
✔ Represents the parent selector exactly
✔ Helps create states, modifiers, pseudo-classes, and combinators

📌 Basic Usage of &

Inside a nested rule, & stands for the entire parent selector.

Basic & usage

.button {
  color: white;

  &:hover {
    background: black;
  }
}

Equivalent to:

Equivalent output

.button:hover {
  background: black;
}

📦 Why Do We Need &?

  • To create interactive states (hover, focus, active)
  • To build BEM-like structures
  • To generate modifiers or variations
  • To use combinators (& + selector, & > selector, & ~ selector)
  • To concatenate parent selectors (&-child, &--modifier)

🎯 1. State Selectors with &

State selectors

.input {
  border: 1px solid #aaa;

  &:focus {
    border-color: blue;
  }

  &:disabled {
    opacity: 0.5;
  }
}

🎨 2. Pseudo-elements with &

Pseudo-element nesting

.title {
  font-size: 2rem;

  &::after {
    content: "";
    display: block;
    height: 2px;
    background: black;
  }
}

📚 3. BEM Naming with &

BEM becomes cleaner using &.

BEM example

.card {
  padding: 1rem;

  &__title {
    font-size: 1.4rem;
  }

  &__button {
    padding: 0.5rem 1rem;
  }

  &--highlight {
    background: yellow;
  }
}

🔗 4. Using & with Combinators

& can appear on either side of combinators.

Combinators with &

.item {
  color: black;

  & > span {
    color: blue; /* .item > span */
  }

  & + .item {
    margin-top: 1rem; /* .item + .item */
  }

  & ~ .info {
    opacity: 0.6; /* .item ~ .info */
  }
}

📐 5. Nested Descendants Without &

If you don’t use &, the nested selector becomes a descendant selector.

Descendant nesting

.profile {
  h2 {
    margin-bottom: 0.5rem;  /* .profile h2 */
  }
}

🧠 6. Selector Concatenation with &

& can be used to append or prepend text to the parent selector.

Concatenation

.btn {
  padding: 10px;

  &-primary {
    background: blue;
    color: white;
  }

  &-outline {
    border: 2px solid blue;
  }
}

Produces:

Output

.btn-primary { … }
.btn-outline { … }

🧪 7. Nesting Multiple Levels

Deep Nesting (use carefully)

.menu {
  background: #111;

  ul {
    padding: 0;

    li {
      color: white;

      &:hover {
        color: orange;
      }
    }
  }
}

Note

⚠️ Avoid more than 2–3 levels of nesting — becomes hard to maintain.

🎯 8. Using & inside Media Queries

Media Query + &

.box {
  width: 300px;

  @media (max-width: 600px) {
    & {
      width: 100%;
    }
  }
}

💡 9. Using & inside @container

Container Query + &

.card {
  container-type: inline-size;

  @container (min-width: 500px) {
    & {
      padding: 2rem;
    }
  }
}

⚠️ Gotchas & Rules

  • ❗ & must refer to a selector — NOT inside property declarations
  • ❗ Without &, selectors become descendants
  • ❗ & always stands for the full parent selector
  • ❗ Don’t nest too deeply → avoid SCSS-style selector bloat

Note

✔ Use & mainly for states, modifiers, and combinators
✔ Keep nesting shallow (1–2 levels) for clean CSS

🔥 Summary

The & nested selector is one of the most powerful features of modern CSS nesting. It lets you build clean component styles, manage state styling, create BEM patterns, and write complex selectors without repetition.

>>“& gives CSS nesting its true power — readable, modular, modern.”

Learn more →& Selector — MDN 📘