CSS nesting

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

Reference

Selectors

• & nesting selector

Guides

• Using CSS nesting
  • : Explains how to use CSS nesting.
• CSS nesting at-rules
  • : Explains how to nest at-rules.
• CSS nesting and specificity
  • : Explains the differences in specificity when nesting CSS.

Related concepts

• Selectors and combinators
• Pseudo-classes
• CSS preprocessor

Specifications

See also

• Specificity
• CSS cascade and inheritance module
• CSS selectors module