CSS Nesting

Write cleaner, more organized, and more maintainable CSS using native nesting!

What is CSS Nesting?

CSS Nesting is a modern feature that allows you to nest selectors inside one another, similar to preprocessors like Sass, but now natively supported in CSS. This makes your stylesheets more readable and helps you logically group related rules.

Cleaner Syntax: Group related styles together, reducing repetition.
Native Support: No build tools or preprocessors needed—just pure CSS!
Scoped Styles: Keep component or section styles together for easier maintenance.

Basic Syntax

nav {
  background: #f0f4fa;
  a {
    color: #4f8cff;
    text-decoration: none;
    &:hover {
      color: #2a4d8f;
      text-decoration: underline;
    }
  }
}

💡 Tip: Use & to reference the parent selector inside a nested block!

Browser Support: Native CSS nesting is supported in all modern browsers (Chrome, Edge, Safari, Firefox). Always check for the latest compatibility.

Interactive Examples

Button with Nested States

.nest-btn {
  background: #4f8cff;
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  padding: 0.7rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  &:hover,
  &:focus {
    background: #2a4d8f;
  }
}

Nested List Styling

Item 1
- Subitem 1.1
- Subitem 1.2
Item 2

.nest-list {
  list-style: disc inside;
  padding-left: 1rem;
  li {
    margin-bottom: 0.5rem;
    ul {
      list-style: circle inside;
      margin-top: 0.3rem;
      li {
        color: #4f8cff;
      }
    }
  }
}

Card with Nested Elements

Card Title

This is a card with nested CSS for its elements.

.nest-card {
  background: #f0f4fa;
  border-radius: 0.8rem;
  padding: 1.2rem;
  h4 {
    margin-top: 0;
    color: #2a4d8f;
  }
  a {
    color: #4f8cff;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

Try it: Interact with the button and explore the nested list and card. All styles are written using native CSS nesting!