---
title: "Cap selector specificity · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade/specificity-limit
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Cap selector specificity

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: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- Rule: Keep every selector at a specificity of `0,2,0` or lower. That is at most two classes, attributes or pseudo-classes, with no ids.
- How: Low, even specificity lets layers and variants decide what wins, instead of selector weight. Wrap context in `:where()` when you need it, because `:where()` adds nothing to specificity. A selector that needs more weight to win is a sign the component has two owners. Set the limit once in the style linter from [Lint styles with one shared config](https://agentwranglers.se/playbook/html-css/checks-in-code/style-linter).
- Check: The linter rule `selector-max-specificity` set to `0,2,0` reports 0 problems on the whole project.

## 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
/* 0,1,0: the component root */
.booking-form { }

/* 0,2,0: a part in one state, the highest allowed */
.booking-form-field[aria-invalid="true"] { }

/* 0,1,0: context through :where() adds no weight */
:where(.booking-page) .booking-form { }

/* 1,2,1: fails the check */
#main .booking-form div.booking-form-field { }
```

### JSON example

```json
{
  "rules": {
    "selector-max-specificity": "0,2,0"
  }
}
```

## Sources

- [Selectors Level 4 on specificity](https://www.w3.org/TR/selectors-4/#specificity-rules)

## Related rules

- [Lint styles with one shared config](https://agentwranglers.se/playbook/html-css/checks-in-code/style-linter) in HTML and CSS
- [Never style by position or deep nesting](https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors) 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/the-cascade/specificity-limit">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Declare the layer order once](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once)
- Next: [Never style by id](https://agentwranglers.se/playbook/html-css/the-cascade/no-id-selectors)
- [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)