CSS Nesting

CSS Nesting is one of the newest and most powerful features in modern CSS. It allows developers to write cleaner, more structured styles by placing selectors inside other selectors, following the natural hierarchy of HTML.

Think of it as writing CSS the way your HTML looks — organized, easy to read, and logical. Instead of repeating parent selectors over and over, you can “nest” related styles inside them.

Why Use CSS Nesting?

• Makes CSS more organized and readable
• Keeps related styles in one place
• Reduces repetition of selectors
• Similar to how developers already use nesting in Sass/SCSS, but now it’s coming natively to CSS

Example Without Nesting

.card {
  background: #f9f9f9;
  padding: 20px;
}

.card h2 {
  font-size: 20px;
}

.card p {
  color: #555;
}

Here, you keep repeating .card for each child element.

Example With Nesting (New CSS Nesting Syntax)

.card {
  background: #f9f9f9;
  padding: 20px;

  h2 {
    font-size: 20px;
  }

  p {
    color: #555;
  }
}

All the styles for .card and its children are grouped together.

Advanced Nesting Example

You can also nest pseudo-classes, pseudo-elements, and child elements.

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;

  &:hover {
    background: #0056b3;
  }

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

  & span {
    font-weight: bold;
  }
}