---
title: "Never style by position or deep nesting · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Never style by position or deep nesting

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

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- Rule: Select elements in a component by their own class, never by tag name, position or ancestry. A selector has at most 3 compound parts and 0 type selectors in the components layer.
- How: A selector like `.order-card div > span:nth-child(2)` breaks when someone adds a wrapper or moves a line. Give the element a class instead, and let [Cap selector specificity](https://agentwranglers.se/playbook/html-css/the-cascade/specificity-limit) keep the weight low. Positional pseudo-classes are fine for repeating patterns such as zebra rows in the base layer.
- Check: In the components folder, the linter rules `selector-max-compound-selectors` set to `3` and `selector-max-type` set to `0` report 0 problems. A search finds 0 uses of `:nth-child`, `:nth-of-type`, `:first-child` or `:last-child` there.

## 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
/* Avoid: breaks when the markup changes */
.order-card div > span:nth-child(2) { }

/* Do: the element names itself */
.order-card-price { }
```

### JSON example

```json
{
  "overrides": [
    {
      "files": ["styles/components/**/*.css"],
      "rules": {
        "selector-max-compound-selectors": 3,
        "selector-max-type": 0,
        "selector-pseudo-class-disallowed-list": ["nth-child", "nth-of-type", "first-child", "last-child"]
      }
    }
  ]
}
```

## Related rules

- [Cap selector specificity](https://agentwranglers.se/playbook/html-css/the-cascade/specificity-limit) in HTML and CSS
- [Avoid wrapper elements that only hold a class](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/no-wrapper-divs) 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/no-position-selectors">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Show state through attributes](https://agentwranglers.se/playbook/html-css/naming-and-state/state-in-attributes)
- Next: [Prefix a component's custom properties with its name](https://agentwranglers.se/playbook/html-css/naming-and-state/component-custom-properties)
- [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)