Info Duplicate CSS selector

Why splitting the same selector's styles across multiple rule blocks makes CSS harder to reason about, and how to combine them.

The validator flags a selector that's declared as its own rule block more than once in the same stylesheet.

Example

/* Split across two blocks */
.card { padding: 1rem; }
.card { border-radius: 8px; }

/* Combined */
.card {
  padding: 1rem;
  border-radius: 8px;
}

Why it matters

Nothing in CSS prevents the same selector from appearing more than once — each block is applied independently, in source order, exactly as if they'd been combined. But splitting them makes the selector's full set of styles harder to see at a glance: to know everything .card does, you now have to find every scattered block instead of reading one. It's also an easy way to accidentally override an earlier declaration — a later block redeclaring the same property wins, silently, with nothing that looks like a conflict at either location. This most often happens when a stylesheet grows by appending new rules at the bottom rather than editing the existing block for a selector.

Frequently asked questions

Is this ever intentional?

Sometimes — for example, a base rule near the top of the stylesheet and a small override later guarded behind a media query or specificity difference. That's a legitimate pattern, which is why this check is informational rather than an error; it's a nudge to double-check, not a hard rule.

Does this catch the same selector inside vs. outside a @media block?

It compares selector text only, not the surrounding context, so a selector repeated once at the top level and once inside @media will be flagged too — that's a normal, common pattern (responsive overrides), so treat this check as a hint rather than a strict violation in that case.