CSS · Modern Features

CSS Nesting

Native CSS nesting - no preprocessor needed!

Find videos you like?

Save to resource drawer for future reference!

Native CSS Nesting

NEW 2023

Sass-like nesting in native CSS!

No Preprocessor Needed!

CSS now supports native nesting just like Sass! Write more organized, readable styles without build tools. The & symbol references the parent selector.

Before vs After

❌ Before (Flat CSS)

.card { }
.card .title { }
.card .content { }
.card:hover { }
.card button { }
.card button:hover { }

✅ After (Nested)

.card {
  .title { }
  .content { }
  &:hover { }
  
  button {
    &:hover { }
  }
}

Basic Nesting

Nest selectors inside each other

Element Nesting

.card {
  background: white;
  padding: 20px;
  
  /* Nested selector for .card h2 */
  h2 {
    color: blue;
    margin-bottom: 10px;
  }
  
  /* Nested selector for .card p */
  p {
    color: gray;
  }
  
  /* Nested selector for .card button */
  button {
    background: blue;
    color: white;
  }
}

✨ Elements nested inside will automatically become descendants

Class Nesting

.card {
  .header { }
  .content { }
}

ID Nesting

#main {
  #sidebar { }
  #content { }
}

Multiple Levels

.nav {
  ul {
    li {
      a { }
    }
  }
}

The & Symbol

Reference the parent selector

The & symbol represents the parent selector. Essential for pseudo-classes and modifiers!

Common & Usage

.button {
  background: blue;
  color: white;
  
  /* &:hover = .button:hover */
  &:hover {
    background: darkblue;
  }
  
  /* &:focus = .button:focus */
  &:focus {
    outline: 2px solid blue;
  }
  
  /* &.active = .button.active */
  &.active {
    background: green;
  }
  
  /* &--large = .button--large (BEM) */
  &--large {
    padding: 20px;
    font-size: 18px;
  }
}

Pseudo-classes

&:hover { }
&:focus { }
&:active { }

Pseudo-elements

&::before { }
&::after { }

State modifiers

&.active { }
&.disabled { }

BEM modifiers

&--primary { }
&--large { }

Compound selectors

&[disabled] { }
&[type="text"] { }

Practical Example

Real-world component styling

CSS Nesting Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="card">
      <div class="header">
        <div class="icon">🎨</div>
        <h2>CSS Nesting</h2>
      </div>
      <div class="content">
        <p>
          This card is styled with <strong>native CSS nesting</strong>!
          No Sass, no build tools needed.
        </p>
        <p>
          All the nested selectors, hover states, and even
          <strong>dark mode</strong> support work natively in browsers.
        </p>
      </div>
      <button>Learn More</button>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Important Rules

Things to know about CSS nesting

When to Use &

Pseudo-classes and modifiers NEED &: Use &:hover, &.active, etc.
Element/class nesting DON'T NEED &: Just write h2 { }, .header { }

✅ Works

.card {
  &:hover { } /* GOOD */
  h2 { }      /* GOOD */
}

❌ Wrong

.card {
  :hover { }  /* BAD - needs & */
  .active { } /* OK but & preferred */
}

Remember

Native CSS nesting - No Sass/preprocessor needed!

Use & for pseudo-classes and modifiers

Elements can be nested directly: h2 { }

Browser support: Chrome 112+, Safari 16.5+, Firefox 117+

Previous Topic

Logical Properties

block-start/end, inline-start/end, writing-mode, direction, and international layouts.

Next Topic

Cascade Layers

@layer rules, layer ordering, specificity management, and modular CSS architecture.

Ask a Question

Have a question about CSS Nesting? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Modern Features

CSS Nesting

Native CSS nesting - no preprocessor needed!

Find videos you like?

Save to resource drawer for future reference!

Native CSS Nesting

NEW 2023

Sass-like nesting in native CSS!

No Preprocessor Needed!

CSS now supports native nesting just like Sass! Write more organized, readable styles without build tools. The & symbol references the parent selector.

Before vs After

❌ Before (Flat CSS)

.card { }
.card .title { }
.card .content { }
.card:hover { }
.card button { }
.card button:hover { }

✅ After (Nested)

.card {
  .title { }
  .content { }
  &:hover { }
  
  button {
    &:hover { }
  }
}

Basic Nesting

Nest selectors inside each other

Element Nesting

.card {
  background: white;
  padding: 20px;
  
  /* Nested selector for .card h2 */
  h2 {
    color: blue;
    margin-bottom: 10px;
  }
  
  /* Nested selector for .card p */
  p {
    color: gray;
  }
  
  /* Nested selector for .card button */
  button {
    background: blue;
    color: white;
  }
}

✨ Elements nested inside will automatically become descendants

Class Nesting

.card {
  .header { }
  .content { }
}

ID Nesting

#main {
  #sidebar { }
  #content { }
}

Multiple Levels

.nav {
  ul {
    li {
      a { }
    }
  }
}

The & Symbol

Reference the parent selector

The & symbol represents the parent selector. Essential for pseudo-classes and modifiers!

Common & Usage

.button {
  background: blue;
  color: white;
  
  /* &:hover = .button:hover */
  &:hover {
    background: darkblue;
  }
  
  /* &:focus = .button:focus */
  &:focus {
    outline: 2px solid blue;
  }
  
  /* &.active = .button.active */
  &.active {
    background: green;
  }
  
  /* &--large = .button--large (BEM) */
  &--large {
    padding: 20px;
    font-size: 18px;
  }
}

Pseudo-classes

&:hover { }
&:focus { }
&:active { }

Pseudo-elements

&::before { }
&::after { }

State modifiers

&.active { }
&.disabled { }

BEM modifiers

&--primary { }
&--large { }

Compound selectors

&[disabled] { }
&[type="text"] { }

Practical Example

Real-world component styling

CSS Nesting Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="card">
      <div class="header">
        <div class="icon">🎨</div>
        <h2>CSS Nesting</h2>
      </div>
      <div class="content">
        <p>
          This card is styled with <strong>native CSS nesting</strong>!
          No Sass, no build tools needed.
        </p>
        <p>
          All the nested selectors, hover states, and even
          <strong>dark mode</strong> support work natively in browsers.
        </p>
      </div>
      <button>Learn More</button>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Important Rules

Things to know about CSS nesting

When to Use &

Pseudo-classes and modifiers NEED &: Use &:hover, &.active, etc.
Element/class nesting DON'T NEED &: Just write h2 { }, .header { }

✅ Works

.card {
  &:hover { } /* GOOD */
  h2 { }      /* GOOD */
}

❌ Wrong

.card {
  :hover { }  /* BAD - needs & */
  .active { } /* OK but & preferred */
}

Remember

Native CSS nesting - No Sass/preprocessor needed!

Use & for pseudo-classes and modifiers

Elements can be nested directly: h2 { }

Browser support: Chrome 112+, Safari 16.5+, Firefox 117+

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Logical Properties

Cascade Layers

Building Your Learning Module...

CSS Nesting

No Preprocessor Needed!

Before vs After

Element Nesting

Common & Usage

CSS Nesting Example

When to Use &

Remember

Logical Properties

Cascade Layers

CSS Nesting

No Preprocessor Needed!

Before vs After

Element Nesting

Common & Usage

CSS Nesting Example

When to Use &

Remember