🌳 CSS Nesting — Complete Modern Tutorial

🌐 What Is CSS Nesting?

CSS Nesting allows you to write selectors inside other selectors, following the structure of your HTML — similar to SCSS. It makes your styles cleaner, more readable, and more maintainable.

>>“CSS Nesting brings the convenience of SCSS directly into native CSS.”

Note

✔ Fully supported in all modern browsers
✔ Requires no preprocessor
✔ Improves structure and reduces repetitive selectors

📦 Basic Syntax

Nesting works by placing child selectors inside parent blocks, and using the & symbol when referencing the parent selector.

Basic Nesting Example

.card {
  padding: 1rem;
  background: #fff;

  h2 {
    font-size: 1.3rem;
  }

  p {
    color: #666;
  }
}

🔑 The & (Ampersand) Selector

& represents the parent selector. Without it, nested rules are treated as descendants.

Using & for states

button {
  padding: 10px 20px;

  &:hover {
    background: black;
    color: white;
  }

  &:active {
    transform: scale(0.98);
  }
}

📌 Important Rule: Nesting Requires a Selector

You must start each nested rule with a selector, not a property.

Note

❌ Wrong

Incorrect Example

.box {
  width: 100px;

  background: {
    color: red;
  }
}

Note

✔ Correct

Correct Nesting

.box {
  width: 100px;

  .content {
    background: red;
  }
}

🎯 Nesting for BEM & Component Styles

BEM Styling

.button {
  padding: 1rem;

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

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

  &__icon {
    width: 20px;
  }
}

🎨 Nesting Pseudo-Classes & Pseudo-Elements

Pseudo Selectors Nesting

.input {
  border: 1px solid #ccc;

  &:focus {
    border-color: blue;
  }

  &::placeholder {
    opacity: 0.6;
  }
}

🧠 Nesting Media Queries

CSS Nesting also supports media queries inside selectors.

Media Query Inside Nest

.card {
  padding: 1rem;

  @media (max-width: 600px) {
    padding: 0.5rem;
  }
}

📂 Nesting Container Queries

Container Query Nesting

.profile {
  container-type: inline-size;

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

🔗 Nesting Combinators

You can nest sibling, child, and descendant selectors using &.

Combinators with Nesting

.list {
  padding: 0;

  & > li {
    margin-bottom: 10px;
  }

  & + .list {
    margin-top: 20px;
  }

  & ~ .footer {
    opacity: 0.5;
  }
}

🧪 Practical Examples

1️⃣ Card Component

Card Component

.card {
  background: #fff;
  padding: 1rem;
  border-radius: 10px;

  h3 {
    margin-bottom: 0.5rem;
  }

  p {
    color: #555;
  }

  &:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  }
}

2️⃣ Navbar Menu

Navbar

nav {
  background: #111;

  ul {
    display: flex;

    li {
      margin-right: 20px;

      a {
        color: white;

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

⚠️ Limitations & Gotchas

  • ❌ Avoid deep nesting (more than 3 levels) → becomes unreadable
  • ❌ & must be used when modifying the parent selector
  • ❌ Cannot nest CSS properties (unlike SCSS)
  • ❌ Cannot nest @rules other than @media, @supports, @container

Note

🎯 Best practice: 1–2 levels of nesting keep your CSS clean and scalable.

🔥 Summary

CSS Nesting brings SCSS-like nesting directly to native CSS, enabling cleaner component-based styling. With nesting, you can group related styles, reduce selector repetition, and improve readability.

>>“Nesting makes CSS feel modern, organized, and component-driven.”

Learn more →MDN Docs 📘