CSS Nesting Examples

Native CSS nesting syntax - no preprocessor needed.
Write nested rules directly in your stylesheets.

What is CSS Nesting?

Native CSS nesting lets you write nested style rules directly in CSS, without a preprocessor like Sass or SCSS. The syntax uses the & selector to reference the parent rule.

Basic Example

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

  & h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: #666;
  }

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

Browser Support

CSS nesting is now supported in all major browsers as of late 2023.

Chrome 120+Safari 17.2+Firefox 117+Edge 120+

Basic Nesting Syntax

The & Selector

The & represents the parent selector. It's required for pseudo-classes, pseudo-elements, and attribute selectors.

Correct Usage

.parent {
  color: blue;

  & .child {
    color: red;
  }

  &:hover {
    color: green;
  }

  &::before {
    content: "→";
  }

  &[data-active] {
    font-weight: bold;
  }
}

Important: & Is Required for Pseudo-Classes

Unlike Sass, native CSS nesting requires & for pseudo-classes and pseudo-elements. Omitting it will not work.

Correct

&:hover { }

Wrong

:hover { }

Relaxed Syntax (Chrome 120+)

In the latest browsers, you can omit & for descendant selectors that start with an element or class:

.card {
  padding: 1rem;

  h2 { /* No & needed */
    font-size: 1.5rem;
  }

  .content { /* No & needed */
    margin-top: 1rem;
  }
}

Nested Media Queries

Media queries can be nested inside selectors, keeping responsive styles together with their base styles.

CSS Code

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;

  @media (min-width: 768px) {
    grid-template-columns: 200px 1fr;
    padding: 2rem;
  }

  @media (min-width: 1024px) {
    grid-template-columns: 300px 1fr;
    gap: 2rem;
  }
}

/* Multiple conditions */
.sidebar {
  display: none;

  @media (min-width: 768px) and (orientation: landscape) {
    display: block;
    width: 250px;
  }
}

Benefits

Keeps responsive styles co-located with base styles
Easier to see all breakpoints for a component
Reduces repetition of selectors
Matches the mental model of component-based development

Nested Container Queries

Container queries can also be nested inside rules, just like media queries.

CSS Code

.card-container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;

  @container (min-width: 400px) {
    flex-direction: row;
    align-items: center;
  }

  & .card-image {
    width: 100%;

    @container (min-width: 400px) {
      width: 150px;
      flex-shrink: 0;
    }
  }
}

Combining Selectors with &

Appending to Parent

Use & to append strings to the parent selector, useful for BEM-style naming.

BEM Pattern

/* Appending to parent selector */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

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

  &-secondary {
    background: gray;
    color: white;
  }

  &-large {
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }
}

/* This compiles to: */
/* .btn { ... } */
/* .btn-primary { ... } */
/* .btn-secondary { ... } */
/* .btn-large { ... } */

Multiple Parent Selectors

When nesting inside a selector list, the nested rule applies to all parents.

Selector List

.card,
.panel {
  padding: 1rem;

  & h2 {
    font-size: 1.25rem;
  }

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

Migration from Sass/SCSS

Native CSS nesting is very similar to Sass, with a few key differences.

SCSS

// SCSS
.card {
  padding: 1rem;

  .title {
    font-size: 1.5rem;
  }

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

  &--featured {
    border: 2px solid gold;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

Native CSS

/* Native CSS */
.card {
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
  }

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

  &--featured {
    border: 2px solid gold;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

Feature	Sass/SCSS	Native CSS
Descendant selectors	`.child { }`	`& .child { }` (or `.child { }` in relaxed mode)
Pseudo-classes	`&:hover { }`	`&:hover { }`
Appending	`&--modifier { }`	`&--modifier { }`
Media queries	`@media { }`	`@media { }`
Variables	`$color: blue;`	`--color: blue;` (CSS custom properties)
Mixins	`@mixin`, `@include`	Not supported

Real-World Example: Card Component

A complete card component using native CSS nesting with hover states, nested content, and responsive behavior.

CSS Code

.card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;

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

  & .card-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  & .card-content {
    padding: 1.5rem;

    & h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    & p {
      color: #666;
      line-height: 1.6;
    }
  }

  & .card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;

    & .btn {
      padding: 0.5rem 1rem;
      background: #3b82f6;
      color: white;
      border-radius: 0.5rem;

      &:hover {
        background: #2563eb;
      }
    }
  }

  @media (min-width: 768px) {
    flex-direction: row;

    & .card-image {
      width: 200px;
      aspect-ratio: 1;
    }

    & .card-content {
      flex: 1;
    }
  }
}

View All Modern CSS Features

Inspect nested CSS on any website

Frontend Hero lets you see the computed styles of any element, including styles from nested CSS rules. Click any element to see its complete cascade.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →