Search pages

Search all CSS Showcase pages by name

Native CSS Nesting

No more preprocessors needed! CSS now supports nesting natively. Write cleaner, more organised stylesheets with less repetition.

Chrome 112+Firefox 117+Safari 16.5+Edge 112+

Goodbye SASS, Hello Native Nesting!

For years, we've relied on preprocessors like SASS and LESS for nesting. Now CSS has caught up! Native nesting means faster builds, simpler tooling, and one less dependency in your project.

Old Way vs New Way
Native nesting eliminates selector repetition — your styles stay grouped, readable, and easy to maintain.

The Old Way (Repetitive)

/* So much repetition! */
.card {
    background: white;
    padding: 2rem;
}

.card h2 {
    margin-bottom: 1rem;
}

.card p {
    line-height: 1.6;
}

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

.card:hover h2 {
    color: #2563eb;
}

The New Way (Native Nesting)

/* Clean and organised! */
.card {
    background: white;
    padding: 2rem;

    h2 {
        margin-bottom: 1rem;
    }

    p {
        line-height: 1.6;
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);

        h2 {
            color: #2563eb;
        }
    }
}

Nesting in Action

See how native CSS nesting simplifies real-world component styles — from navigation bars to complex blog cards.

Basic Nesting
Nest child selectors directly inside their parent — the browser resolves them just like descendant selectors.
css
The & Selector
Use & to reference the parent selector — perfect for modifier classes, pseudo-classes, and state variations.
css
Media Queries & Nesting
Nest @media rules inside selectors for a mobile-first approach — no more jumping between blocks.

Responsive Card

Resize your browser to see me change!

One
Two
Three
css
Complex Component
A full blog card styled entirely with native nesting — hover effects, pseudo-elements, and BEM-style modifiers all in one block.
CSS Tips📝

Native CSS Nesting is Here!

Learn how to use CSS nesting to write cleaner, more maintainable stylesheets.

Thomas ButlerToday
css
Nested Animations
Even animations can live inside nested blocks — keyframes still go at the top level, but everything else nests beautifully.

Hover over me for a surprise!

css

Migrating from SASS

Moving from SASS to native CSS nesting is straightforward, but there are a few key differences to keep in mind.

What Changes and What Stays

What Works the Same

  • Basic nesting of selectors
  • The & parent selector
  • Nesting media queries
  • Nesting pseudo-classes and pseudo-elements

What's Different

  • No variables (use CSS custom properties)
  • No mixins (CSS @mixin is a separate specification)
  • No extends (use CSS classes)
  • No math operations (use calc())

Best Practices

  • Don't nest too deeply (3 levels max)
  • Use BEM naming for clarity
  • Keep specificity in check
  • Test in all target browsers
SASS to CSS Migration Example
Side-by-side comparison showing how SASS features translate to native CSS.

SASS (Before)

// SASS with variables and mixins
$primary: #2563eb;
$radius: 0.5rem;

@mixin button-style {
    padding: 0.75rem 1.5rem;
    border-radius: $radius;
    transition: all 0.2s;
}

.form {
    padding: 2rem;

    &__group {
        margin-bottom: 1.5rem;

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: darken($primary, 20%);
        }

        input {
            @include button-style;
            border: 2px solid $primary;

            &:focus {
                outline: none;
                border-color: lighten($primary, 10%);
            }
        }
    }
}

Native CSS (After)

/* CSS with custom properties */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;
    --radius: 0.5rem;
}

.form {
    padding: 2rem;

    &__group {
        margin-bottom: 1.5rem;

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--primary-dark);
        }

        input {
            /* Direct styles instead of mixin */
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius);
            transition: all 0.2s;
            border: 2px solid var(--primary);

            &:focus {
                outline: none;
                border-color: var(--primary-light);
            }
        }
    }
}

Nesting Rules & Gotchas

Understanding these three core rules will help you avoid common pitfalls when working with native CSS nesting.

The Three Rules

Rule 1: Implicit &

/* CSS automatically adds & */
.parent {
    .child { }     /* = .parent .child */
    & .child { }   /* = .parent .child */

    div { }        /* = .parent div */
    & div { }      /* = .parent div */
}

Rule 2: Combining Selectors

/* Be careful with specificity */
.card {
    /* This becomes .card.active */
    &.active { }

    /* This becomes .card .active */
    .active { }

    /* Multiple selectors */
    h2, h3 {
        margin: 0;
    }
}

Rule 3: At-Rules

/* Media queries and supports */
.element {
    width: 100%;

    @media (min-width: 768px) {
        width: 50%;
    }

    @supports (display: grid) {
        display: grid;
    }
}

Pro Tips

Keep these guidelines in mind when using native CSS nesting in production.

Best Practices

Keep It Shallow

Avoid nesting more than 3 levels deep. It makes CSS harder to read and increases specificity.

BEM + Nesting

Combine BEM naming with nesting for the best of both worlds — clarity and convenience.

DevTools Support

Modern DevTools show nested CSS properly, making debugging much easier than before.