CSS Nesting

CSS nesting allows you to write nested selectors directly in native CSS without preprocessors like Sass or Less. You can nest child selectors, pseudo-classes, pseudo-elements, and media queries inside parent rules, making your CSS more organized and easier to read. The & nesting selector represents the parent selector, enabling powerful patterns for component-based styling. Native nesting brings preprocessor convenience to vanilla CSS with improved browser support.

What is CSS Nesting?

CSS nesting allows you to write selectors inside other selectors, creating a hierarchy that mirrors your HTML structure.

Why Use CSS Nesting?

Better organization: Group related styles together
Improved readability: Visual hierarchy matches HTML
Less repetition: Don't repeat parent selectors
Easier maintenance: Changes in one place
Component-based: Perfect for modern component architecture
No build step: Works in native CSS

Without Nesting (Old Way)

CSS

.card {
  padding: 1rem;
  background: white;
}

.card h3 {
  margin: 0;
  color: blue;
}

.card p {
  color: gray;
}

.card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card:hover h3 {
  color: darkblue;
}

With Nesting (Modern Way)

CSS

.card {
  padding: 1rem;
  background: white;
  
  h3 {
    margin: 0;
    color: blue;
  }
  
  p {
    color: gray;
  }
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    h3 {
      color: darkblue;
    }
  }
}

Browser Support: Native CSS nesting is supported in Chrome 112+, Safari 16.5+, and Firefox 117+. For older browsers, the CSS will be ignored, so provide fallbacks or use a build tool for production.

Basic Nesting Syntax

The simplest form of nesting is putting child selectors inside parent selectors.

basic-nesting.css

/* Basic child nesting */
.parent {
  color: blue;
  
  .child {
    color: red;
  }
  
  .another-child {
    color: green;
  }
}

/* Equivalent to: */
.parent { color: blue; }
.parent .child { color: red; }
.parent .another-child { color: green; }

/* Nesting with element selectors */
.card {
  padding: 1rem;
  
  h3 {
    margin: 0;
    font-size: 1.5rem;
  }
  
  p {
    line-height: 1.6;
  }
  
  a {
    color: blue;
    text-decoration: none;
  }
}

/* Multiple levels of nesting */
.header {
  background: white;
  
  .nav {
    display: flex;
    
    .nav-item {
      padding: 1rem;
      
      a {
        color: blue;
      }
    }
  }
}

Basic Nesting Example

📝 Nesting Best Practices:

Keep nesting shallow: Limit to 2-3 levels deep. Deep nesting creates overly specific selectors and makes CSS harder to override.
Group related styles: Nest styles that logically belong together, like all button states or all card elements.

The & Nesting Selector

The & symbol represents the parent selector. It's essential for pseudo-classes, pseudo-elements, and modifier classes.

ampersand.css

/* & represents the parent selector */

/* Pseudo-classes */
.button {
  background: blue;
  
  &:hover {
    background: darkblue;
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* Pseudo-elements */
.input {
  border: 1px solid gray;
  
  &::placeholder {
    color: lightgray;
  }
  
  &::before {
    content: "→ ";
  }
}

/* Modifier classes (BEM-style) */
.button {
  padding: 1rem;
  
  &--primary {
    background: blue;
  }
  
  &--secondary {
    background: gray;
  }
  
  &--large {
    padding: 1.5rem 2rem;
  }
}

/* State classes */
.card {
  border: 1px solid gray;
  
  &.active {
    border-color: blue;
  }
  
  &.disabled {
    opacity: 0.5;
  }
}

/* Combining & with descendant selectors */
.nav {
  background: white;
  
  & a {
    color: blue;
  }
  
  & .nav-item:hover {
    background: lightgray;
  }
}

/* Multiple & in one rule */
.button {
  color: black;
  
  &:hover,
  &:focus {
    color: blue;
    outline: 2px solid blue;
  }
}

/* & in complex selectors */
.card {
  padding: 1rem;
  
  .sidebar & {
    /* Selects .card inside .sidebar */
    padding: 0.5rem;
  }
}

& Nesting Selector Examples

Nesting Media Queries

One of the most powerful features: nest media queries directly inside selectors instead of repeating selectors in separate media query blocks.

media-nesting.css

/* Old way: Separate media query blocks */
.card {
  padding: 1rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 3rem;
    font-size: 1.25rem;
  }
}

/* New way: Nested media queries */
.card {
  padding: 1rem;
  font-size: 1rem;
  
  @media (min-width: 768px) {
    padding: 2rem;
    font-size: 1.125rem;
  }
  
  @media (min-width: 1024px) {
    padding: 3rem;
    font-size: 1.25rem;
  }
}

/* Nesting media queries with child selectors */
.header {
  background: white;
  padding: 1rem;
  
  .logo {
    width: 100px;
    
    @media (min-width: 768px) {
      width: 150px;
    }
  }
  
  .nav {
    display: none;
    
    @media (min-width: 768px) {
      display: flex;
    }
  }
}

/* Multiple conditions */
.component {
  color: black;
  
  @media (min-width: 768px) and (max-width: 1024px) {
    color: blue;
  }
  
  @media (prefers-color-scheme: dark) {
    color: white;
    background: black;
  }
}

Nested Media Queries (Resize to See Changes)

Huge Benefit: Nested media queries keep responsive styles with their components. No more searching through separate media query blocks to find styles—everything related to a component stays together!

Nesting Container Queries

Container queries can also be nested, making component-based responsive design even more powerful.

container-nesting.css

/* Set up container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Nest container queries inside component */
.card {
  padding: 1rem;
  
  h3 {
    font-size: 1.25rem;
  }
  
  .card-image {
    width: 100%;
  }
  
  /* Nested container query */
  @container card (min-width: 400px) {
    padding: 2rem;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    
    h3 {
      font-size: 1.5rem;
    }
    
    .card-image {
      width: 200px;
    }
  }
  
  @container card (min-width: 600px) {
    padding: 3rem;
    
    h3 {
      font-size: 2rem;
    }
  }
}

Nested Container Queries

Practical Nesting Patterns

Component-Based Pattern

component-pattern.css

/* Complete component with all styles nested */
.button {
  /* Base styles */
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: #2c3e50;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Pseudo-classes */
  &:hover {
    background: #d0d0d0;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Variants */
  &--primary {
    background: #667eea;
    color: white;
    
    &:hover {
      background: #5568d3;
    }
  }
  
  &--large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }
  
  /* Icons inside buttons */
  .icon {
    margin-right: 0.5rem;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    width: 100%;
    padding: 1rem;
  }
}

Card Component Pattern

Complete Card Component with Nesting

Nesting Guidelines

Best Practices

Limit nesting depth: Keep it to 2-3 levels maximum
Group logically: Nest related styles together
Use & for states: Pseudo-classes, modifiers, state classes
Nest media queries: Keep responsive styles with component
Avoid over-specificity: Don't nest just because you can

What to Avoid

Deep nesting (4+ levels): Creates overly specific selectors
Nesting unrelated styles: Just for organization
Complex nested conditions: Hard to debug and override
Duplicating parent selector: Use & instead

guidelines.css

/* ❌ Bad: Too deep, too specific */
.header {
  .nav {
    .nav-list {
      .nav-item {
        .nav-link {
          color: blue; /* .header .nav .nav-list .nav-item .nav-link */
        }
      }
    }
  }
}

/* ✓ Good: Shallow, specific where needed */
.header {
  .nav-link {
    color: blue; /* .header .nav-link */
    
    &:hover {
      color: darkblue;
    }
  }
}

/* ❌ Bad: Unrelated nesting */
.container {
  padding: 2rem;
  
  .button {  /* Button not related to container */
    background: blue;
  }
}

/* ✓ Good: Related nesting */
.card {
  padding: 1rem;
  
  .card-title {  /* Title is part of card */
    font-size: 1.5rem;
  }
  
  .card-button {  /* Button is part of card */
    margin-top: 1rem;
  }
}

Key Takeaways

Native nesting: No preprocessor needed
& selector: Represents parent selector
Better organization: Related styles grouped together
Media queries: Can be nested inside selectors
Container queries: Can be nested too
Pseudo-classes: Use & for :hover, :focus, etc.
Modifiers: Use & for BEM-style modifiers
Keep nesting shallow (2-3 levels max)
Group logically related styles
Avoid over-specificity
Works in Chrome 112+, Safari 16.5+, Firefox 117+
Makes component-based CSS easier

What's Next?

Congratulations! You've completed the Modern CSS Features section covering CSS functions, modern layout features, logical properties, and native CSS nesting. These cutting-edge features represent the future of CSS—flexible, maintainable, and powerful.

In the final section, Best Practices & Performance, we'll explore CSS organization methodologies, performance optimization, browser compatibility, and debugging techniques. You'll learn how to write production-ready CSS that's fast, maintainable, and works everywhere.

CSS nesting is a game-changer for code organization. Start nesting your pseudo-classes, media queries, and related child selectors. Your CSS will be more readable, easier to maintain, and perfectly mirrors your component structure. Just remember: keep it shallow and keep it logical!

What is CSS Nesting?

CSS nesting allows you to write selectors inside other selectors, creating a hierarchy that mirrors your HTML structure.

Why Use CSS Nesting?

Better organization: Group related styles together
Improved readability: Visual hierarchy matches HTML
Less repetition: Don't repeat parent selectors
Easier maintenance: Changes in one place
Component-based: Perfect for modern component architecture
No build step: Works in native CSS

Without Nesting (Old Way)

CSS

.card {
  padding: 1rem;
  background: white;
}

.card h3 {
  margin: 0;
  color: blue;
}

.card p {
  color: gray;
}

.card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card:hover h3 {
  color: darkblue;
}

With Nesting (Modern Way)

CSS

.card {
  padding: 1rem;
  background: white;
  
  h3 {
    margin: 0;
    color: blue;
  }
  
  p {
    color: gray;
  }
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    h3 {
      color: darkblue;
    }
  }
}

Basic Nesting Syntax

The simplest form of nesting is putting child selectors inside parent selectors.

basic-nesting.css

/* Basic child nesting */
.parent {
  color: blue;
  
  .child {
    color: red;
  }
  
  .another-child {
    color: green;
  }
}

/* Equivalent to: */
.parent { color: blue; }
.parent .child { color: red; }
.parent .another-child { color: green; }

/* Nesting with element selectors */
.card {
  padding: 1rem;
  
  h3 {
    margin: 0;
    font-size: 1.5rem;
  }
  
  p {
    line-height: 1.6;
  }
  
  a {
    color: blue;
    text-decoration: none;
  }
}

/* Multiple levels of nesting */
.header {
  background: white;
  
  .nav {
    display: flex;
    
    .nav-item {
      padding: 1rem;
      
      a {
        color: blue;
      }
    }
  }
}

Basic Nesting Example

📝 Nesting Best Practices:

The & Nesting Selector

The & symbol represents the parent selector. It's essential for pseudo-classes, pseudo-elements, and modifier classes.

ampersand.css

/* & represents the parent selector */

/* Pseudo-classes */
.button {
  background: blue;
  
  &:hover {
    background: darkblue;
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* Pseudo-elements */
.input {
  border: 1px solid gray;
  
  &::placeholder {
    color: lightgray;
  }
  
  &::before {
    content: "→ ";
  }
}

/* Modifier classes (BEM-style) */
.button {
  padding: 1rem;
  
  &--primary {
    background: blue;
  }
  
  &--secondary {
    background: gray;
  }
  
  &--large {
    padding: 1.5rem 2rem;
  }
}

/* State classes */
.card {
  border: 1px solid gray;
  
  &.active {
    border-color: blue;
  }
  
  &.disabled {
    opacity: 0.5;
  }
}

/* Combining & with descendant selectors */
.nav {
  background: white;
  
  & a {
    color: blue;
  }
  
  & .nav-item:hover {
    background: lightgray;
  }
}

/* Multiple & in one rule */
.button {
  color: black;
  
  &:hover,
  &:focus {
    color: blue;
    outline: 2px solid blue;
  }
}

/* & in complex selectors */
.card {
  padding: 1rem;
  
  .sidebar & {
    /* Selects .card inside .sidebar */
    padding: 0.5rem;
  }
}

& Nesting Selector Examples

Nesting Media Queries

One of the most powerful features: nest media queries directly inside selectors instead of repeating selectors in separate media query blocks.

media-nesting.css

/* Old way: Separate media query blocks */
.card {
  padding: 1rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 3rem;
    font-size: 1.25rem;
  }
}

/* New way: Nested media queries */
.card {
  padding: 1rem;
  font-size: 1rem;
  
  @media (min-width: 768px) {
    padding: 2rem;
    font-size: 1.125rem;
  }
  
  @media (min-width: 1024px) {
    padding: 3rem;
    font-size: 1.25rem;
  }
}

/* Nesting media queries with child selectors */
.header {
  background: white;
  padding: 1rem;
  
  .logo {
    width: 100px;
    
    @media (min-width: 768px) {
      width: 150px;
    }
  }
  
  .nav {
    display: none;
    
    @media (min-width: 768px) {
      display: flex;
    }
  }
}

/* Multiple conditions */
.component {
  color: black;
  
  @media (min-width: 768px) and (max-width: 1024px) {
    color: blue;
  }
  
  @media (prefers-color-scheme: dark) {
    color: white;
    background: black;
  }
}

Nested Media Queries (Resize to See Changes)

Nesting Container Queries

Container queries can also be nested, making component-based responsive design even more powerful.

container-nesting.css

/* Set up container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Nest container queries inside component */
.card {
  padding: 1rem;
  
  h3 {
    font-size: 1.25rem;
  }
  
  .card-image {
    width: 100%;
  }
  
  /* Nested container query */
  @container card (min-width: 400px) {
    padding: 2rem;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    
    h3 {
      font-size: 1.5rem;
    }
    
    .card-image {
      width: 200px;
    }
  }
  
  @container card (min-width: 600px) {
    padding: 3rem;
    
    h3 {
      font-size: 2rem;
    }
  }
}

Nested Container Queries

Practical Nesting Patterns

Component-Based Pattern

component-pattern.css

/* Complete component with all styles nested */
.button {
  /* Base styles */
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: #2c3e50;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Pseudo-classes */
  &:hover {
    background: #d0d0d0;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Variants */
  &--primary {
    background: #667eea;
    color: white;
    
    &:hover {
      background: #5568d3;
    }
  }
  
  &--large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }
  
  /* Icons inside buttons */
  .icon {
    margin-right: 0.5rem;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    width: 100%;
    padding: 1rem;
  }
}

Card Component Pattern

Complete Card Component with Nesting

Nesting Guidelines

Best Practices

Limit nesting depth: Keep it to 2-3 levels maximum
Group logically: Nest related styles together
Use & for states: Pseudo-classes, modifiers, state classes
Nest media queries: Keep responsive styles with component
Avoid over-specificity: Don't nest just because you can

What to Avoid

Deep nesting (4+ levels): Creates overly specific selectors
Nesting unrelated styles: Just for organization
Complex nested conditions: Hard to debug and override
Duplicating parent selector: Use & instead

guidelines.css

/* ❌ Bad: Too deep, too specific */
.header {
  .nav {
    .nav-list {
      .nav-item {
        .nav-link {
          color: blue; /* .header .nav .nav-list .nav-item .nav-link */
        }
      }
    }
  }
}

/* ✓ Good: Shallow, specific where needed */
.header {
  .nav-link {
    color: blue; /* .header .nav-link */
    
    &:hover {
      color: darkblue;
    }
  }
}

/* ❌ Bad: Unrelated nesting */
.container {
  padding: 2rem;
  
  .button {  /* Button not related to container */
    background: blue;
  }
}

/* ✓ Good: Related nesting */
.card {
  padding: 1rem;
  
  .card-title {  /* Title is part of card */
    font-size: 1.5rem;
  }
  
  .card-button {  /* Button is part of card */
    margin-top: 1rem;
  }
}

Key Takeaways

Native nesting: No preprocessor needed
& selector: Represents parent selector
Better organization: Related styles grouped together
Media queries: Can be nested inside selectors
Container queries: Can be nested too
Pseudo-classes: Use & for :hover, :focus, etc.
Modifiers: Use & for BEM-style modifiers
Keep nesting shallow (2-3 levels max)
Group logically related styles
Avoid over-specificity
Works in Chrome 112+, Safari 16.5+, Firefox 117+
Makes component-based CSS easier

What is CSS Nesting?

Why Use CSS Nesting?

Without Nesting (Old Way)

With Nesting (Modern Way)

Basic Nesting Syntax

Basic Nesting Example

The & Nesting Selector

& Nesting Selector Examples

Nesting Media Queries

Nested Media Queries (Resize to See Changes)

Nesting Container Queries

Nested Container Queries

Practical Nesting Patterns

Component-Based Pattern

Card Component Pattern

Complete Card Component with Nesting

Nesting Guidelines

Best Practices

What to Avoid

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New CSS Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

CSS Tutorials

CSS Nesting

What is CSS Nesting?

Why Use CSS Nesting?

Without Nesting (Old Way)

With Nesting (Modern Way)

Basic Nesting Syntax

Basic Nesting Example

The & Nesting Selector

& Nesting Selector Examples

Nesting Media Queries

Nested Media Queries (Resize to See Changes)

Nesting Container Queries

Nested Container Queries

Practical Nesting Patterns

Component-Based Pattern

Card Component Pattern

Complete Card Component with Nesting

Nesting Guidelines

Best Practices

What to Avoid

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New CSS Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

CSS Tutorials