📱 CSS @media Nested Rules — Complete Tutorial

🌐 What Are @media Nested Rules?

With modern CSS Nesting, you can write @media queries inside a selectorinstead of scattering them across your stylesheet. This keeps component styles grouped together, clean, and easy to maintain.

>>“Media queries inside components make CSS truly modular and scalable.”

Note

✔ Fully supported in modern browsers
✔ Works only when the outer rule is a valid selector
✔ Keeps responsive styles next to their base styles

📦 Basic Syntax

Simply place @media inside a rule block:

Basic Nested @media

.card {
  padding: 1rem;

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

The media query adjusts the style only inside .card. This keeps all card-related CSS together.

📌 Why Use Nested Media Queries?

  • Organizes component styles in one place
  • Reduces CSS file fragmentation
  • Improves readability in large projects
  • Follows the philosophy of component-driven CSS

🎯 Example: Responsive Component

Responsive Card Component

.profile-card {
  width: 300px;
  padding: 1rem;

  @media (max-width: 500px) {
    width: 100%;
    padding: 0.75rem;
  }
}

📐 Using Multiple @media Queries

Multiple Breakpoints

.hero {
  font-size: 2rem;

  @media (max-width: 900px) {
    font-size: 1.7rem;
  }

  @media (max-width: 600px) {
    font-size: 1.3rem;
  }
}

Each breakpoint adjusts the same component in a clean, stacked way.

🔗 Combining @media with &

Use & inside @media when referencing the parent selector explicitly.

& inside @media

.btn {
  padding: 1rem 2rem;

  @media (max-width: 600px) {
    & {
      padding: 0.75rem 1.5rem;
    }
  }
}

Note

You may include & or omit it — both versions work because the @media applies to its containing selector automatically.

🎨 Styling Nested Child Selectors Inside Media Queries

Nested children + media queries

.card {
  padding: 1rem;

  h2 {
    font-size: 1.5rem;
  }

  @media (max-width: 500px) {
    h2 {
      font-size: 1.2rem;
    }
  }
}

Child selectors remain accessible inside the nested media query.

🧪 Real-World Examples

1️⃣ Responsive Navigation Menu

Navbar Example

nav {
  display: flex;
  gap: 1rem;

  @media (max-width: 700px) {
    flex-direction: column;
    gap: 0.5rem;
  }
}

2️⃣ Responsive Grid Component

Grid Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  @media (max-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 500px) {
    grid-template-columns: 1fr;
  }
}

3️⃣ Button With Touch-Friendly Size

Touch UI Example

.btn {
  padding: 0.75rem 1.5rem;

  @media (pointer: coarse) {
    padding: 1rem 2rem;
  }
}

Great for mobile devices or touch screens.

⚠️ Nesting Rules & Gotchas

  • ❗ @media must be inside a selector — not at the root of nesting
  • ❗ Cannot nest other at-rules that don't support being nested
  • ❗ Deep nesting (selectors + media) can become hard to read

Note

🎯 Best practice: Keep nesting shallow (1–2 levels max).

🔥 Summary

Nested @media rules allow you to write responsive styles directly inside the component they belong to. This makes CSS cleaner, more modular, and easier to maintain — especially in component-driven systems or large applications.

>>“CSS nesting + @media creates truly modular, component-focused responsive design.”

Learn more →MDN @media Docs 📘