The class prefix selector: .btn-* is coming to CSS Selectors 5

You have a button system. .btn-primary, .btn-secondary, .btn-danger. Same base padding, same radius, three names. Your options today are ugly: repeat the selector list, reach for an attribute-selector hack, or add a shared .btn class next to every variant in the markup. A fourth option just made it into spec text. .btn-*. One selector, one hyphenated prefix, the whole family.

What the working group agreed

Bramus wrote up the resolution on bram.us: at a CSS Working Group F2F in Berlin about two weeks before the post, the group resolved to add a Class Prefix Selector to Selectors Level 5. The idea started as a proposal from Lea Verou in 2024, opened as csswg-drafts issue #10001. It now lives as draft text in Selectors 5.

The syntax is a class followed by a hyphen and a *:

.btn-* {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.btn- is the prefix. The rule applies to every class whose name starts with .btn- and has at least one character beyond it. .btn-primary matches. .btn-danger matches. .btn on its own does not. .btn- with nothing after the hyphen does not. And per the source, the first character after the prefix cannot itself be a hyphen — so .btn--muted would not match either.

What it deletes from your stylesheet

Three patterns compete for this job today, and each carries a specific tax.

The base-class dance:

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

You put a shared class on every variant in the HTML. Two class names per element forever, and you have to remember the base one at every call site.

Listing every variant:

.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

The selector list grows with every new variant. Add .btn-ghost, edit the CSS.

Or the attribute-selector version:

[class^="btn-"],
[class*=" btn-"] {
  padding: 0.5rem 1rem;
}

That one is subtle. [class^="btn-"] only matches when btn- is the first class in the attribute value. If any other class comes first, you need the second selector with the leading space to catch it. Two rules for one intent.

.btn-* collapses all three. One selector. The engine does the prefix match itself, against class tokens rather than the raw attribute string.

The state of the browsers

None of them yet. The source lists Chromium (Blink), Gecko and WebKit as no-support, and links the Chromium tracking issue (CrBug #543356377). This is spec text with a working-group resolution behind it, not a shipping feature. The source also repeats the standard Level 5 warning: the spec is expected to change before it ships.

When engines do pick it up, feature-detect first. The source shows the query:

@supports selector(.foo-*) {
  /* the browser understands the prefix selector */
}

Same shape as any modern selector probe.

What this shifts in how you write CSS

Nothing yet, is the honest answer. But it is worth reading your own naming with fresh eyes. If your codebase already leans on hyphenated conventions — .btn-primary, .card-elevated, .toast-error, .icon-16, all the way down — you have been half-writing a class prefix selector this whole time. You just did not have the syntax to close it out.

When browsers do land it, three rules with matching selector lists will collapse into one line, and no HTML has to move for that to happen. The naming convention was already doing the work.