CSS Is Getting a Class Prefix Selector
Canonical version: CSS Is Getting a Class Prefix Selector.
CSS is getting a new selector to target a whole family of classes at once: .btn-*.
At its face-to-face meeting in Berlin in August 2026, the CSS Working Group resolved to add a class prefix selector. Bramus (Bram Van Damme, Chrome DevRel) wrote about it on August 20, and the post made it to Hacker News.
The problem
Say you have .btn-primary, .btn-secondary, and .btn-danger, and you want them all to share padding and border radius. Today, you have two options:
- Add a base class to every element (
class="btn btn-primary") - Use an attribute selector like
[class*=" btn-"], which is fragile and roughly 20 times slower than a regular class selector
Neither is great.
The new syntax
.btn-* {
padding: 0.5rem 1rem;
border-radius: 4px;
}
That's it. It matches every class that starts with btn-. Matching works on hyphen-separated prefixes, so .btn-* won't accidentally match a class like .btnfoo.
The group considered reusing the |= attribute selector, but rejected it: it also matches the exact value (e.g., .bi alone), has performance concerns, and would limit future wildcard syntax in CSS.
Can you use it?
No. Not yet. It only exists as draft spec text, and the spec will probably change before browsers implement it. No browser supports it today (Chromium, Firefox, or Safari).
When support lands, you'll be able to feature-detect it:
@supports selector(.foo-*) {
/* Browser has support */
}
What Hacker News thinks
The reactions were mixed, leaning skeptical:
- Is it needed? Several developers argued that
class="btn primary"targeted with.btnalready solves this - Performance: some worry this is a first step towards regex selectors, and the slowdown that comes with them
- Why hyphens? The special treatment of
-over other separators was questioned - Discoverability: you can no longer grep a codebase for a class name and find all the places that style it. That one is a real maintenance cost
- Alternatives: native CSS nesting today, and mixins in the future
My take
I get the skepticism, but I think this is a welcome addition. Naming conventions like BEM and utility-first frameworks produce exactly these families of classes, and the current attribute selector workarounds are ugly and slow.
The grep argument is the strongest one against it, though. Use it for real families of variants, not as a shortcut to avoid naming things properly.
References
- The Future of CSS: Target Multiple Classes with the Class Prefix Selector (Bramus): https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/
- Hacker News discussion: https://news.ycombinator.com/item?id=49368182
Related
About Sébastien
Ready to get to the next level?
Found this valuable? Share it with someone who needs it.