🍋
Menu
CSS

CSS Nesting Selector

CSS & Nesting Selector

The & character in native CSS nesting representing the parent selector, mirroring Sass nesting behavior.

Detalle técnico

CSS CSS Nesting Selectors require a containment context declared with container-type: inline-size on the parent element. The @container rule then queries the container's dimensions rather than the viewport. Container query units (cqw, cqh, cqi, cqb) resolve relative to the query container. This enables truly reusable components that adapt to their available space regardless of viewport size — solving the long-standing limitation of media queries in component-based architectures.

Ejemplo

```css
/* Example: CSS Nesting Selector */
.element {
  /* Apply css nesting selector to this element */
  display: block;
  margin: 0 auto;
}
```

Formatos relacionados

Herramientas relacionadas

Términos relacionados