---
title: "Nest only states and queries one level · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/naming-and-state/shallow-css-nesting
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Nest only states and queries one level deep

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- ID: CSS-33
- Level: Recommended
- Chapter: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- Rule: Nest at most one level inside a style rule. A nested rule is either `&` followed by a pseudo-class or attribute, or an `@media` or `@container` block. Never nest a class inside another class.
- How: Native CSS nesting writes the parent into every nested selector, so each level adds weight and length you cannot see in the source. The `&` counts like `:is()` over the whole parent list, so one id in that list makes every nested rule outweigh plain classes. Nesting a class such as `.order-card-price` inside `.order-card` only repeats what the prefix already says. Keep each part as its own top-level rule, as [Never style by position or deep nesting](https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors) requires. The output is checked by [Check the built CSS as well as the source](https://agentwranglers.se/playbook/html-css/checks-in-code/check-built-css).
- Check: The linter rules `max-nesting-depth` set to `1` and `selector-nested-pattern` set to `^&(:|\[)` report 0 problems. Adding a nested `.order-card-price` inside `.order-card` stops the build.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### CSS example

```css
/* Do: a state and a query, one level deep */
.order-card-button {
  &:hover { }
  &[aria-pressed="true"] { }
  @container (min-width: 30rem) { }
}

/* Avoid: nested parts become long, heavy selectors in the output */
.order-card {
  .order-card-body {
    & > .order-card-price { }
  }
}
```

### JSON example

```json
{
  "rules": {
    "max-nesting-depth": 1,
    "selector-nested-pattern": "^&(:|\\[)"
  }
}
```

## Sources

- [CSS Nesting on the nesting selector](https://www.w3.org/TR/css-nesting-1/#nest-selector)
- [CSS Nesting on nested group rules](https://www.w3.org/TR/css-nesting-1/#conditionals)

## Related rules

- [Never style by position or deep nesting](https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors) in HTML and CSS
- [Check the built CSS as well as the source](https://agentwranglers.se/playbook/html-css/checks-in-code/check-built-css) in HTML and CSS

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/naming-and-state/shallow-css-nesting">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Keep script hooks apart from style hooks](https://agentwranglers.se/playbook/html-css/naming-and-state/separate-script-hooks)
- [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)