---
title: "Never style by id · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade/no-id-selectors
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Never style by id

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

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

- Level: Recommended
- Chapter: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- Rule: Use ids only for links, labels and scripts. No CSS selector contains an id.
- How: One id outweighs any number of classes. A single `#header` rule then beats every component variant and forces `!important` to undo it. Style the element through its module class. Keep the id for `href="#..."`, `for`, `aria-labelledby` and `aria-controls`. Its naming follows [Keep ids unique and stable](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/unique-stable-ids).
- Check: The linter rule `selector-max-id` set to `0` reports 0 problems.

## 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.

### HTML example

```html
<!-- The id is for the label and the skip link, the class is for styling -->
<form class="booking-form" id="booking" aria-labelledby="booking-title">
  <h2 id="booking-title" class="booking-form-title">Book a table</h2>
</form>
```

### CSS example

```css
/* Avoid */
#booking { }

/* Do */
.booking-form { }
```

### JSON example

```json
{ "rules": { "selector-max-id": 0 } }
```

## Sources

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

## Related rules

- [Keep ids unique and stable](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/unique-stable-ids) 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/no-id-selectors">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Cap selector specificity](https://agentwranglers.se/playbook/html-css/the-cascade/specificity-limit)
- Next: [Keep !important inside the utilities layer](https://agentwranglers.se/playbook/html-css/the-cascade/important-only-in-utilities)
- [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)