Log in
To target multiple classes that share the same prefix, you’d typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a new selector: The Class Prefix Selector (.prefix-*).
~
⚠️ This post is about an upcoming CSS feature. You can’t use it … yet.
This feature is hot off the press — it was resolved on only two weeks ago — and currently only exists in spec text. The spec will most likely see some changes before this is ready for a browser to implement.
~
The Problem: Targeting Multiple Prefixed Classes
When coming up with classnames for use in the class attribute, a common practice is to use a prefix to retain some grouping or hierarchy. You might be familiar with classes like .btn-primary, .btn-secondary, .btn-danger, and so on.
To apply a base style to all of these buttons today, you typically have to list them all out, or introduce a separate .btn base class:
/* Adding a base class */
.btn {
padding: 0.5rem 1rem;
border-radius: 4px;
}
/* Or listing everything... yuck! */
.btn-primary,
.btn-secondary,
.btn-danger {
padding: 0.5rem 1rem;
border-radius: 4px;
}Some of you even resort to substring-matching attribute selectors, but those can be notoriously brittle and ugly when dealing with multiple classes on a single element:
/* Works, but can be error-prone with whitespace */
[class^="btn-"],
[class*=" btn-"] {
padding: 0.5rem 1rem;
}~
The Solution: The Class Prefix Selector
Just two weeks ago, at the CSS Working Group F2F meeting in Berlin (August 2026), we resolved to add a dedicated Class Prefix Selector to the CSS Selectors Level 5 specification. The idea was originally pitched by Lea Verou back in 2024 (w3c/csswg-drafts/#10001).
The syntax is incredibly straightforward:
.btn-* {
padding: 0.5rem 1rem;
border-radius: 4px;
}That’s it! The -* part at the end makes the selector a Class Prefix Selector and will try to match any class that begins with that hyphen-separated prefix.
It’s a huge win for utility classes and design systems, allowing you to easily target groups of related elements without having to bloat your HTML payload or write fragile attribute selectors.
~
What about the empty string?
An interesting question that popped up during the discussions is whether .foo-* should match the empty string (w3c/csswg-drafts/#14291), meaning: should .foo-* also match an element that merely has the .foo- class?
While the exact default behavior is still being ironed out, currently the selector is specified to only match classes that start with the prefix and that have at least one character beyond the prefix (and the first such character beyond the prefix is not also a hyphen)
So no, class="foo-" would NOT be matched by .foo-*, which I think is fine. That same selector also would not match class="foo--", which is also probably fine.
~
What about non-dashes?
The Class Prefix Selector is currently limited to hyphen-separated prefixes, at least at first. Other separators, like _, might be added as possibilities in the future as we receive request from authors like yourself about what would be needed.
One thing that is already quite clear right now, is that there must at least be some separator. Arbitrary prefixes (like .foo*) are not going to be allowed for at least two reasons:
- You could accidentally overselect:
.foo*would also match.footer - Selector Performance: Browsers typically create buckets for class selectors for quick selector matching. Adding arbitrary wildcards defeat that optimization.
Similarly, wildcards in the middle of a selector (such as .card-*-primary) are also not going to be allowed.
# Browser Support
💡 Although this post was originally published in August 2026, the list below is constantly being updated. Last update: August 20, 2026.
Since this was literally just resolved at the CSSWG F2F in Berlin two weeks ago, browser support is currently non-existent. To follow along with the progress – if any – you can follow these browser issues:
- Chromium (Blink)
-
❌ No Support
Subscribe to CrBug #543356377 to follow along.
- Firefox (Gecko)
-
❌ No Support
There is no bug tracking this yet.
- Safari (WebKit)
-
❌ No Support
There is no bug tracking this yet.
This feature is still in its early days and needs to be fleshed out further, so could be that it takes a few more years before you can use it in production …
# Feature Detection
You can feature detect support with a regular @supports rule:
@supports selector(.foo-*) {
/* Browser has support */
}The following CodePen uses this and will light green when you browser supports it:
See the Pen
CSS Class Prefix Selector Support test by Bramus (@bramus)
on CodePen.
Spread the word
Feel free to reshare one of the following posts on social media to help spread the word:
~
🔥 Like what you see? Want to stay in the loop? Here's how:
I can also be found on 𝕏 Twitter and 🐘 Mastodon but only post there sporadically.
