🪺 CSS Nesting Generator

⚙️ Options

💡 About CSS Nesting

CSS Nesting is a native CSS feature (CSS Nesting Module Level 1) that lets you nest style rules within other rules. Use the & symbol to reference the parent selector. Example:

.card {
  background: #fff;
  & .title { font-size: 1.2rem; }
  &:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
}
📌 Note: CSS Nesting requires nested selectors to start with &, ., #, :, [, >, +, or ~.