CSS Nesting

Modern
A { B { } }

Native CSS nesting allows writing child selectors inside parent rules, similar to Sass/LESS.

Example

.card {
  padding: 16px;
  & h2 {
    margin: 0;
  }
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Specificity

Sum of parts

Browser Support

Chrome 120+, Safari 17.2+, Firefox 117+

About the CSS Nesting

The A { B { } } CSS selector belongs to the Modern category.Native CSS nesting allows writing child selectors inside parent rules, similar to Sass/LESS. Understanding CSS selector specificity and combinators is essential for writing maintainable stylesheets that behave predictably.

The specificity of this selector is Sum of parts. CSS specificity determines which styles are applied when multiple rules target the same element. Higher specificity values take precedence. The specificity hierarchy from lowest to highest is: universal (*) → type/element → class/attribute/pseudo-class → ID → inline styles → !important.

Browser support for CSS Nesting is: Chrome 120+, Safari 17.2+, Firefox 117+. When using newer CSS selectors like :has(), :is(), or CSS nesting, consider providing fallback styles for older browsers. Use @supports to progressively enhance your stylesheets with modern features while maintaining backward compatibility.

Related Selectors

A BA > B:is(selector)